Color Picker & Converter
Hex, rgb() or hsl() — with or without the #.
Colour
#4098A4
R 64 · G 152 · B 164
Best against black text — contrast 6.25:1, which passes AA at any text size, and AAA for large text.
How this was worked out
- Channels#4098a4 → R 64, G 152, B 164
- Lightness(0.643 + 0.251) ÷ 2 = 45%
- Relative luminance0.2126×0.0513 + 0.7152×0.314 + 0.0722×0.3712 = 0.2623
- Against white text1.05 ÷ (0.2623 + 0.05) = 3.36:1
- Against black text(0.2623 + 0.05) ÷ 0.05 = 6.25:1
sRGB throughout, which is the space a browser means by a hex or an rgb() value. HSL, HSV and CMYK are rounded to whole numbers for display, so pasting a printed HSL back can land a step or two from where it started — the hex is the value to keep. CMYK here is the plain arithmetic conversion with no colour profile in it: a printer’s own profile decides the real ink mix, so treat it as a starting point rather than a proof. Alpha is read and then ignored, so #4098a4ff and #4098a4 are the same colour here. Contrast is WCAG 2.2 relative luminance against pure white and pure black, which is not the same as against the off-white your page actually uses.
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 typed in any of those notations — hex, rgb(), hsl(), with or without an alpha — and shows all five, each one copyable, alongside a WCAG contrast check. Anything it prints, it will read back.
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. Every other notation is derived from those same three numbers.
| Notation | #4098a4 in that notation |
|---|---|
| Hex | #4098a4 |
| RGB | rgb(64, 152, 164) |
| HSL | hsl(187, 44%, 45%) |
| HSV | hsv(187, 61%, 64%) |
| CMYK | cmyk(61%, 7%, 0%, 36%) |
Hue 187° is the position on the colour wheel and is the one component the two cylindrical models agree on. HSL and HSV then measure saturation differently and call the third axis something different, which is why the percentages disagree for the same colour. CMYK generates black first and measures the other three inks 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.
| Colour | Against white | Against black | Readable choice |
|---|---|---|---|
| #4098a4 | 3.36 | 6.25 | Black text, passes AA |
| #1e90ff, dodger blue | 3.24 | 6.49 | Black text, passes AA |
Both tell the same story, and it is a warning about white text on mid-toned blue — 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 one of three, and which one applies depends on the text rather than the colour.
| Requirement | Minimum ratio |
|---|---|
| AA, normal body text | 4.5:1 |
| AA, large text — 18pt, or 14pt bold | 3:1 |
| AAA, normal body text | 7:1 |
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.
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, so the ratio describes the colour you specified rather than the light that reaches the reader.
Hex, HSL and readable text
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.
Last reviewed 27 August 2026