Color Converter
Enter a colour in any common format to get every other format, plus WCAG contrast ratios against white and black.
How it works
All the formats describe the same colour differently. RGB and HEX give the amounts of red, green and blue; HSL and HSV describe hue, saturation and either lightness or value, which is why they are easier to adjust by hand. CMYK is a print model and is approximated here — real print output depends on the colour profile.
Contrast ratio comes from relative luminance, which weights green far more heavily than blue because human eyes are more sensitive to it. That is why a mid-blue can fail against white while a mid-green of the same apparent darkness passes.
The formula
Contrast ratio
(L₁ + 0.05) ÷ (L₂ + 0.05), lighter over darker
Relative luminance
0.2126 R + 0.7152 G + 0.0722 B, on linearised channels
WCAG minimums
4.5:1 body text · 3:1 large text and UI · 7:1 for AAA
Worked examples
| Scenario | Working | Result |
|---|---|---|
| #ff0000 | Convert | rgb(255, 0, 0) · hsl(0, 100%, 50%) |
| #777777 on white | Contrast | 4.48:1 — just fails AA body text |
| hsl(245, 54%, 54%) | Convert | Returns the matching hex |
When you'd use it
- Turning a hex from a design file into RGB for code
- Checking a brand colour is legible as body text
- Adjusting lightness by editing the L in HSL
- Getting an approximate CMYK value for print
Common questions
What contrast ratio do I actually need?
4.5:1 for normal body text and 3:1 for large text or interface components, to meet WCAG AA. AAA asks for 7:1. Both figures are shown for white and black backgrounds.
Why does my CMYK differ from my print shop's?
Because CMYK conversion depends on the colour profile, ink and paper. The value here is a device-independent approximation — useful for a rough idea, not for a press-ready file.
Which formats can I paste in?
Hex in 3, 4, 6 or 8 digits with or without the #, plus rgb() and hsl() function syntax. The colour picker sets the field for you if you would rather choose visually.