Color converter

Convert colours between HEX, RGB, HSL and more

Runs in your browser. Nothing is uploaded.

How it works

One colour can be written many ways. Designers use HEX and HSL, screens use RGB, and print uses CMYK. Paste a colour in HEX, RGB or HSL, or use the picker, to see it in every format. We also show its contrast on white and black, with AA and AAA accessibility ratings.

One colour, written in HEX, RGB, HSL, OKLCH and CMYK.

OKLCH is a newer CSS format that matches how we see colour, so equal changes look equal.

Contrast uses the WCAG formula. AA needs 4.5:1 for normal text, and AAA needs 7:1.

Worked example. #2f3198 is rgb(47, 49, 152) and hsl(239, 53%, 39%). On a white background, its contrast is 10.43:1, AAA.

Examples

HEX	RGB	HSL
#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)
#ffffff	rgb(255, 255, 255)	hsl(0, 0%, 100%)
#ff0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
#2f3198	rgb(47, 49, 152)	hsl(239, 53%, 39%)

What this tool doesn’t cover

CMYK here is approximate. Real print colour depends on ink and paper.

Questions

What is the difference between RGB and HEX?

They’re the same values, written differently. #ff0000 is rgb(255, 0, 0).

Why is CMYK approximate?

Screens make colour with light, and print with ink, so an exact match needs a print profile.

What contrast do I need?

For normal text, 4.5:1 meets AA, and 7:1 meets AAA.

How do I convert HEX to RGB?

Split the code into three pairs and read each as a number from 0 to 255. So #FF8000 is 255, 128, 0.

What is HSL used for?

HSL describes a colour by hue, saturation and lightness. It makes it easy to create lighter or darker shades.

Was this useful?

Built by QuickToolz.

Sources: W3C CSS Color Module Level 4 (opens in a new tab), W3C: WCAG 2.2 (opens in a new tab)