🎨

Color Code Converter

This color code converter is a free tool that instantly converts between HEX, RGB, and HSL formats. Select colors intuitively with the color picker and copy codes with one click. Features preset colors and color history. All processing is done locally in your browser with no data transmission.

What You Can Do

The Color Code Converter instantly converts between HEX, RGB, and HSL formats. Perfect for web development and design work. All processing is done in your browser, and no data is sent to servers.

✅ HEX⇔RGB⇔HSL Conversion: Automatically converts between formats as you type
✅ Built-in Color Picker: Intuitively select colors from a visual palette
✅ One-Click Copy: Easily copy any code to your clipboard

Convert color codes between HEX, RGB, and HSL formats. Select colors and get all format codes instantly.

🎨 Color Picker

Click the color swatch to select a color

🎨

Click to select color

HEX Code

RGB

HSL

🎯 Preset Colors

📚 Color History

Your color history will appear here

💼 Use Cases

CSS coding in web development - Convert between HEX, RGB, and HSL for code writing
Cross-tool color conversion - Unify color specifications between Photoshop, Sketch, and Figma
Color code verification - Get all format codes from sample colors
Gradient preparation - Adjust RGB values to calculate intermediate colors
Accessibility compliance - Check RGB values to calculate contrast ratios

How to Use

📌 Basic Usage

Select a color using the color picker or directly input HEX, RGB, or HSL values to automatically convert to other formats.

💡 Color Code Formats

HEX (Hexadecimal): #RRGGBB format (e.g., #3498db)
RGB: Red, Green, Blue values from 0-255 (e.g., rgb(52, 152, 219))
HSL: Hue, Saturation, Lightness (e.g., hsl(204, 70%, 53%))

⚙️ Main Features

Real-time Conversion: Instantly converts to other formats as you type
One-Click Copy: Copy any code with a single click
Preset Colors: Easily select commonly used colors
Color History: Automatically saves used colors

🎨 Format Characteristics

HEX: Most common in web development. Widely used in CSS and HTML
RGB: Intuitive and easy to understand. Used in image editing software
HSL: Easy to adjust colors. Useful for hue-based color schemes

💼 Application Scenarios

Web Design & Development
Graphic Design
Color Scheme Creation
Brand Color Management
Color Palette Planning

♿ Web Accessibility and Contrast Ratio (WCAG 2.1)

What is WCAG 2.1 (Web Content Accessibility Guidelines)?

WCAG 2.1 is an international standard guideline established by the W3C (World Wide Web Consortium) to make web content accessible (easy to use). Japan's "JIS X 8341-3:2016" also complies with WCAG 2.0, and government websites are required to follow these guidelines.

WCAG 2.1 defines clear standards for contrast ratio (color contrast) to ensure that people with visual impairments or color blindness can correctly understand information.

Contrast Ratio Standards (WCAG 2.1 Success Criterion 1.4.3)

The contrast ratio between text and background must meet the following standards:

Level AA (General Requirement):
- Normal Text: Contrast ratio of 4.5:1 or higher
- Large Text (18pt or larger, or 14pt bold or larger): Contrast ratio of 3:1 or higher
Level AAA (More Stringent):
- Normal Text: Contrast ratio of 7:1 or higher
- Large Text: Contrast ratio of 4.5:1 or higher

Most companies and government agencies adopt Level AA as the minimum standard.

How to Calculate Contrast Ratio

The contrast ratio is calculated using the following formula:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
L1 = Relative luminance of the lighter color
L2 = Relative luminance of the darker color

Relative luminance is calculated from RGB values. For example, black (#000000) has a luminance of 0, white (#FFFFFF) has a luminance of 1, and the contrast ratio between white and black is 21:1 (maximum value).

Contrast Ratio Examples

⭕ Good Examples (4.5:1 or higher):
- Black (#000000) and White (#FFFFFF): 21:1
- Dark Blue (#003366) and White (#FFFFFF): 12.6:1
- Dark Gray (#595959) and White (#FFFFFF): 7:1
❌ Bad Examples (Below 4.5:1):
- Light Gray (#999999) and White (#FFFFFF): 2.8:1 (Fail)
- Yellow (#FFFF00) and White (#FFFFFF): 1.1:1 (Fail)
- Light Blue (#66B3FF) and White (#FFFFFF): 2.4:1 (Fail)

Best Practices for Accessible Color Selection

Ensure Sufficient Contrast for Text: Use dark colors (#333333 or darker) on white backgrounds, and bright colors (#CCCCCC or lighter) on black backgrounds.
Don't Rely on Color Alone: For people with color blindness, convey information using icons and text, not just color.
Underline Links: Don't indicate links with color alone; add underlines for visual distinction.
Use Contrast Checkers: Verify with tools like Chrome DevTools, WebAIM Contrast Checker, or Colour Contrast.
Support Dark Mode: Ensure sufficient contrast in both light mode and dark mode.

UI Component Contrast Standards

WCAG 2.1 also has contrast ratio standards for UI components (buttons, forms, icons), not just text (Success Criterion 1.4.11):

UI Component Borders: Contrast ratio of 3:1 or higher with adjacent colors
Icons: Contrast ratio of 3:1 or higher with background
Focus Indicators: Contrast ratio of 3:1 or higher for clear visual focus during keyboard navigation

Legal Requirements and Business Benefits

Japan: The "Act for Eliminating Discrimination against Persons with Disabilities" enacted in 2016 mandates reasonable accommodation for government agencies (private businesses have a duty to make efforts).
United States: The ADA (Americans with Disabilities Act) makes web accessibility a legal obligation.
EU: Accessibility standards are defined by EN 301 549.

Accessible design is user-friendly for everyone, not just people with disabilities, leading to improved SEO, increased user satisfaction, and reduced legal risks.

📅 Last Updated: 2025-12-09 | 💬 Feedback: Send Feedback