Color Picker & Converter
Best against black text — contrast 6.25:1 (passes WCAG AA)
One colour, five notations, one contrast check
The same colour has a different name in every context: a hex triplet in CSS, an RGB tuple in a canvas API, HSL when you want to derive a lighter variant, HSV in a design tool’s picker, and CMYK when something is going to print. This tool takes a colour from the swatch or a typed hex value and shows all five, each one copyable, alongside a WCAG contrast check.
Hex input is forgiving: three-digit shorthand like #fff expands, and four- or eight-digit values with an alpha channel are accepted with the alpha dropped, since none of the other notations here carry transparency.
A worked conversion
Take #4098a4. The hex pairs are the red, green and blue channels in base 16: 40 is 64, 98 is 152 and a4 is 164, giving rgb(64, 152, 164).
From there the other notations are derived from the same three numbers. HSL is hsl(187, 44%, 45%): hue 187° is the position on the colour wheel, 44% saturation, 45% lightness. HSV is hsv(187, 61%, 64%) — same hue, but saturation and value are measured differently, which is why the two sets of percentages disagree for the same colour. CMYK is cmyk(61%, 7%, 0%, 36%), with black generated first and the other three inks measured against what remains.
How the contrast figure works
Contrast is calculated to WCAG 2.x: each channel is converted from its 0-255 value to a linear light value, combined as 0.2126 × red + 0.7152 × green + 0.0722 × blue to give relative luminance, and the ratio between two colours is (lighter + 0.05) ÷ (darker + 0.05). The green coefficient dominates because human vision is most sensitive to green, which is why a saturated yellow reads as bright and a saturated blue does not.
The tool tests your colour against both pure white and pure black and reports the better of the two. #4098a4 scores 3.36 against white and 6.25 against black, so black text on that background is the readable choice and it passes AA. Dodger blue #1e90ff scores 3.24 against white and 6.49 against black — the same story, and a warning about white text on mid-toned blue, which is one of the most common accessibility failures on the web.
What the numbers do and do not promise
The 4.5:1 threshold used here is WCAG AA for normal body text. Large text — 18pt, or 14pt bold — passes at 3:1, and AAA requires 7:1 for body text. So a colour marked as failing may still be usable for a heading, and a colour that passes at 4.5 is not necessarily comfortable to read at length.
The CMYK conversion is the naive arithmetic one, not a colour-managed one. Real print uses ICC profiles that account for the specific inks, paper and press, and a printer will produce different numbers from these. Treat CMYK here as a starting point for a conversation with a print shop, not as a specification. Similarly, contrast is calculated in sRGB, which is what browsers assume; a display in a wide-gamut mode will render the same hex value slightly differently.
Colour questions
What is the difference between HSL and HSV?
The third component. In HSL, 100% lightness is white and 50% is the pure hue. In HSV, 100% value is the pure hue at full brightness and white only appears when saturation drops to zero. Design tools mostly use HSV pickers; CSS uses HSL.
Why does #fff work but #ffff not?
Both work. Three digits is shorthand where each digit is doubled, and four digits is the same shorthand with an alpha channel — #ffff is white at full opacity. The alpha is parsed and then discarded, because RGB, HSL, HSV and CMYK have nowhere to put it.
Does passing the contrast check mean the design is accessible?
It means one specific requirement is met for that colour pair. Text size and weight, the contrast of interface controls and focus indicators, and how the colour behaves in a dark theme are all separate checks that a single ratio cannot cover.