Color Code Converter
Convert between HEX, RGB, HSL, HSV and CMYK, and check text contrast
Loading the tool…
Type a color into any one of HEX, RGB, HSL, HSV, CMYK, OKLCH or CSS name, and the other formats update at once. Use it to move a color from a design into CSS or to check that text has enough contrast with its background.
How to use
- Choose a color with "Pick a color" or type a value into one field such as HEX or RGB. The other fields follow; copy any of them with the button next to it.
- Set "Opacity" to add transparency; HEX then has 8 digits and RGB becomes rgba.
- Select a swatch under "Lighter and darker" or "Color harmonies" to switch to that color.
- In the "Contrast checker", set the "Text color" and "Background color" and read the "Contrast ratio" and the AA and AAA results.
How it works
- HEX writes the red, green and blue values (0 to 255) as two hexadecimal digits each. For example, rgb(255, 99, 71) is #FF6347.
- Contrast ratio = (relative luminance of the lighter color + 0.05) ÷ (relative luminance of the darker color + 0.05), judged by WCAG 2.2 success criteria 1.4.3 and 1.4.6. The ratio is rounded down.
- CMYK uses a simple formula without a print profile, so real printed color will differ. Recent colors and the last color are saved on this device.
Questions and answers
- How do I convert HEX to RGB?
- Split the code into pairs and convert each pair from hexadecimal to decimal. #3B82F6 gives 3B = 59, 82 = 130 and F6 = 246, so rgb(59, 130, 246). Type it into the HEX field to see it at once.
- What contrast ratio does text need?
- WCAG AA asks for 4.5:1 for normal text and 3:1 for large text; AAA asks for 7:1 and 4.5:1. Large text is at least 24px, or 18.66px bold.
- What is a 3-digit HEX code?
- A short form of the 6-digit code in which each digit is doubled. #F80 is the same color as #FF8800.
- Can it tell me the name of a color?
- If the color matches one of the 148 CSS color names, that name is shown; otherwise the nearest CSS name and its HEX value appear.