The same colour can be written as a hex code, an RGB triple or an HSL triple — three notations for identical pixels. This converter shows all three at once with a live preview, and tells you whether text in that colour will actually be readable on white or black.
The three notations
They describe the same colour; they differ in what is easy to reason about.
- HEX — #4F46E5. Compact and universal in CSS and design tools. Two hex digits per channel, so #ABC is shorthand for #AABBCC.
- RGB — rgb(79, 70, 229). The same three channels in decimal, 0 to 255. Easier to read and to compute with.
- HSL — hsl(243, 75%, 59%). Hue as an angle on the colour wheel, then saturation and lightness. The only one where "the same colour but lighter" is a single obvious edit.
Why HSL is worth learning
Building a palette in hex means guessing. Building one in HSL means holding the hue constant and stepping the lightness — which is how most modern design-token systems are structured.
It also makes relationships explicit. A complementary colour is the hue plus 180 degrees. An analogous pair is plus or minus 30. In hex those are arbitrary strings with no visible connection.
Contrast, and why the maths is not obvious
The contrast figures here follow WCAG 2.1. A ratio of 4.5:1 is required for normal text and 3:1 for large text, on a scale from 1:1 to a maximum of 21:1.
The calculation is not a simple comparison of brightness values. sRGB is gamma-encoded, so each channel has to be linearised before it contributes to luminance — mid grey (#808080) has a relative luminance of roughly 0.216, not 0.5. Tools that skip that step report contrast that looks plausible and is wrong.
Note also that the ratio is deliberately blind to hue. Two colours can pass comfortably and still be a poor pairing for someone with colour vision deficiency, which contrast alone does not capture.
The alpha channel
An eight-digit hex code carries opacity in its last two digits: #4F46E580 is the same colour at 50%. Support is universal in modern browsers.
One caution: contrast against a semi-transparent colour depends on whatever sits behind it. The figures here treat the colour as opaque, so check translucent overlays against their real background.
FAQ
How do I convert hex to RGB by hand?
Split the six digits into three pairs and read each as a hexadecimal number. 4F is 79, 46 is 70, E5 is 229 — so #4F46E5 is rgb(79, 70, 229).
What does the three-digit form mean?
It is shorthand where each digit is doubled: #ABC expands to #AABBCC. It cannot express every colour, only the 4,096 where both digits of each channel match.
Why does my colour show hue 0 and no saturation?
Because it is a grey — all three channels are equal. Grey has no hue, so the value is reported as 0 by convention rather than because it is red.
Does passing the contrast check mean my design is accessible?
It means that specific text-on-background pair meets the minimum. Accessibility also depends on font size and weight, focus indicators, and not relying on colour alone to convey meaning. The ratio is a floor, not a certificate.