Colour Converter
Enter a colour in any CSS format, or pick one, to get it in every other format. The contrast checker shows whether it passes WCAG AA and AAA as text.
- Runs on your device
- No sign-up
- Free, no watermark
How to use the Colour Converter
- 01Type or paste a colour, such as #0a6b4e, rgb(10 107 78), hsl(162 83% 23%) or tomato, or use the colour picker.
- 02Copy the format you need from the list.
- 03Check the contrast cards to see whether the colour works as text on white, on black or on your own background.
- 04Click a swatch in the lighter-to-darker scale to explore nearby shades.
Good to know
Runs on your device
All conversions are calculated in your browser. Nothing is uploaded.
Every common format
HEX with or without alpha, rgb(), hsl(), hwb(), oklch(), oklab(), CMYK and the 148 CSS colour names.
WCAG contrast
Contrast ratio against white, black and a colour you choose, with AA and AAA results for normal and large text.
Honest about gamut
OKLCH colours that screens can't show are brought into sRGB by lowering chroma, and the tool tells you when it does.
Frequently asked questions
What is OKLCH and why use it?
OKLCH describes a colour by lightness, chroma and hue in the OKLab space, which matches how people see brightness better than HSL. Changing only the lightness keeps the hue looking the same, which makes it good for building colour scales.
Why was my OKLCH colour changed?
OKLCH can describe colours that are outside the sRGB range most screens show. The tool lowers the chroma at the same lightness and hue until the colour fits, and says how far it moved.
How is the contrast ratio calculated?
With the WCAG 2 formula: the relative luminance of the lighter colour plus 0.05, divided by that of the darker colour plus 0.05. AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1.
Is the CMYK value accurate for printing?
It's the simple formula most web tools use, without a printer profile. Use it as a starting point and check with your printer, because real inks and paper change the result.
Does it handle transparency?
Yes. Alpha is kept in HEX (#rrggbbaa), rgb(), hsl() and the other CSS formats. For contrast, a transparent colour is first painted over the background it's tested against.