Color Converter
HEX, RGB, HSL and contrast checks.
Runs entirely in your browser. Nothing you enter or upload leaves your device.
What the colour converter does
The same colour can be written in many ways. A designer hands over a HEX code, a stylesheet wants HSL, a print supplier asks for CMYK, and a brand guide lists RGB. This tool converts a colour between HEX, RGB, HSL, HSV and CMYK in one go. It also checks whether a text colour and a background colour have enough contrast to read comfortably.
It’s handy when you’re turning a brand palette into CSS, matching a colour from one app in another, or tweaking a shade by adjusting its lightness in HSL. The contrast checker helps before you publish: low-contrast text is hard to read for many people, especially on phones outdoors or for anyone with low vision.
How to use the colour converter
- Pick a colour or type it in any common format: #ff8800, rgb(255, 136, 0), hsl(32, 100%, 50%) or a CSS name such as teal.
- Copy the format you need from the list.
- In the contrast checker, enter a text colour and a background colour to see the WCAG ratio and which levels pass.
Understanding the results
Every format updates together as you type, with a swatch to confirm the colour looks right. Values are rounded to whole numbers, so converting back and forth can shift a channel by one. HSL is often the easiest format to work with by hand. Keep the hue and saturation, and change only the lightness, to get a darker or lighter shade of the same colour. The list also gives a ready-made CSS custom property line you can paste into a stylesheet.
In the contrast checker, the ratio runs from 1:1 (no contrast) to 21:1 (black on white). Below it, each WCAG level is marked pass or fail, and the sample shows large and normal text in your two colours. If normal text fails AA, darken the text or lighten the background a step at a time until it passes. The Use as background button copies the colour you just converted into the background box.
Questions
What contrast do I need?
WCAG 2.2 level AA asks for 4.5:1 for normal text and 3:1 for large text (24 px, or 18.7 px bold) and for interface parts such as input borders. Level AAA asks for 7:1 and 4.5:1.
Is the CMYK value print-ready?
It is a simple mathematical conversion. Printers use colour profiles, so check important print colours with your printer.
Does it support transparency?
No, the converter works with solid colours. Alpha values in rgba() and hsla() are ignored. Eight-digit HEX codes that include alpha aren’t accepted, so drop the last two digits first.
Can I type just three numbers?
Yes. Three numbers from 0 to 255, separated by spaces or commas, are read as red, green and blue.