About the Color Converter (HEX, RGB, HSL, CMYK)
Convert a colour between HEX, RGB, HSL, HSV and CMYK in one step. Paste a value in any of these formats, or pick a colour, and copy whichever format your design tool, stylesheet or printer needs.
The page also shows how readable text in that colour is on white and on black, using the WCAG contrast ratio that accessibility guidelines are based on.
How it works
HEX and RGB describe the same thing: the amount of red, green and blue from 0 to 255; HEX simply writes each amount as two hexadecimal digits. HSL and HSV describe the same colours by hue (an angle on the colour wheel), saturation, and lightness or brightness, which is easier to adjust by hand. The conversions follow the formulas in the W3C CSS Color specification.
CMYK is how printers mix cyan, magenta, yellow and black ink. The simple formula used here is a good starting point, but real print colours depend on the paper, the inks and the printer's colour profile, so treat CMYK values as approximate and ask your printer for exact ones.
HEX #RRGGBB = RGB(RR, GG, BB) in base 16 CMYK: K = 1 − max(R, G, B); C = (1 − R − K) ÷ (1 − K), and the same for M and Y Contrast = (lighter luminance + 0.05) ÷ (darker luminance + 0.05)
Assumptions and limits
- Colours are in the standard sRGB space used by websites and most screens.
- RGB is shown as whole numbers and the other formats to one decimal place, so converting a displayed value back can differ by 1 in a channel.
- Named colours such as 'tomato' aren't accepted; use a HEX or RGB value instead.
Worked examples
A brand blue
#1e90ff is rgb(30, 144, 255), hsl(209.6, 100%, 55.9%) and, approximately, cmyk(88.2%, 43.5%, 0%, 0%). Its contrast on white is 3.24:1, fine for large headings but too low for body text.
Purple from HSL
hsl(270, 50%, 40%) is #663399, the colour CSS calls rebeccapurple. Raising lightness to 60% gives a softer purple with the same hue.
Checking text colour
Grey #767676 on white has a contrast of 4.54:1, just above the 4.5:1 that WCAG AA asks for normal text, which makes it a common choice for secondary text.
WCAG 2 contrast requirements for text
From WCAG 2.1, success criteria 1.4.3 and 1.4.6.
| Level | Normal text | Large text (18pt, or 14pt bold) |
|---|---|---|
| AA | 4.5 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 |
How to use the Color Converter (HEX, RGB, HSL, CMYK)
- Enter or pick a colour. Any of HEX, rgb(), hsl(), hsv() or cmyk().
- Copy the format you need. Each value has its own copy button.
- Check the contrast. See whether text in this colour passes on white or black.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each from base 16 to base 10. For #1e90ff: 1e = 30, 90 = 144 and ff = 255, so the colour is rgb(30, 144, 255). The converter does this instantly in either direction.
What's the difference between HSL and HSV?
Both use hue and saturation, but HSL's third value is lightness (50% is the pure colour, 100% is white) while HSV's is value or brightness (100% is the pure colour). Design apps such as Photoshop call HSV 'HSB'.
Why don't my CMYK values match my printer's?
Converting screen colours to ink depends on the paper, inks and press, described by an ICC colour profile. This tool uses the simple formula without a profile, so use its CMYK as a starting point and confirm with your printer.
What contrast ratio do I need for text?
WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text; level AAA asks for 7:1 and 4.5:1. The preview shows the ratio for white and black backgrounds.
Does it support transparency (alpha)?
Not yet. An alpha value typed in rgba() or hsla() is ignored and only the colour is converted, and 8-digit HEX values aren't accepted. Transparency doesn't change between formats, so you can add it back afterwards.
Sources
This tool runs entirely in your browser. What you enter or upload stays on your device and is never sent to our servers.