Design
Colour Converter
Pick a colour or type any of the three notations and the other two update instantly, together with a swatch that tells you whether text on it should be dark or light.
How to use it
- Type a HEX value, an
rgb()value, or use the colour picker. - The other two notations update immediately.
- The swatch tells you whether text on that background should be dark or light.
HEX, RGB and HSL answer different questions
HEX and RGB describe the same thing: three channel intensities in sRGB. HSL re-expresses those numbers as hue, saturation and lightness, which matches how people describe colour — “make it darker” means lower the lightness, not subtract 20 from every channel. Designers pick in HSL and ship in HEX because the former is predictable and the latter is compact.
Contrast is a separate problem from colour
WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The ratio is computed from relative luminance, not from the perceptual difference you see, which is why a pair of colours that look distinct can still fail. Pure red on white is 3.99:1 — it passes for headings and fails for body copy.
Why designers convert to HSL to edit
HEX is a storage format: it is compact and unambiguous, and it tells you nothing about relationships. HSL separates the three questions you actually ask while adjusting a palette — which hue, how saturated, how light — so a hover state becomes "same hue, 6% darker" instead of a new hex value picked by eye.
The eight-digit form adds alpha at the end (#RRGGBBAA), and it is not supported everywhere: older Android browsers and some email clients ignore it and render the colour opaque. For anything that has to survive an inbox, use rgba().
Frequently asked questions
Why are HSL values different from Photoshop?
HSL is a mathematical transform of RGB, so it agrees exactly. If numbers differ, the other tool is showing HSV/HSB — a different model that looks similar.
Does it support alpha or 8-digit HEX?
It handles the three colour channels. Keep transparency separately as rgba() or the last two HEX digits.
Is “colour” or “color” the CSS keyword?
CSS uses American spelling: background-color. The British spelling here is prose only.
Why does my colour look different on another screen?
Because the hex value is device-independent but the screen is not. Untagged colours are assumed sRGB; a wide-gamut display will render them more saturated than a cheap panel.
How do I make a colour accessible?
Check the contrast ratio against its background: 4.5:1 for body text, 3:1 for large text and UI borders. The colour itself does not matter, the ratio does.