Color Converter (HEX, RGB, HSL)
Convert colours between HEX, RGB, HSL, HSV and CMYK, pick one visually, and check its text contrast against white and black for accessibility.
Runs in your browser. Nothing is uploaded.
About the Color Converter (HEX, RGB, HSL)
The same colour is written differently depending on where you use it: HEX codes in CSS and design tools, RGB values in code, HSL when you want to adjust lightness or saturation, and CMYK percentages for print. Converting by hand means juggling formulas and rounding.
Type a colour in any common format, or pick one with the colour picker, and every other format appears ready to copy. The contrast check shows the WCAG 2 contrast ratio of the colour as text on white and on black backgrounds, and whether it meets the AA (4.5:1) or AAA (7:1) levels that accessibility guidelines recommend for body text. That helps you choose brand colours that stay readable.
How to use the Color Converter (HEX, RGB, HSL)
- 1
Type a colour in any format, such as #1e90ff, rgb(30 144 255) or hsl(210 100% 56%), or use the picker.
- 2
Copy the format you need: HEX, RGB, HSL, HSV or CMYK.
- 3
Check the contrast rows to see whether text in this colour is readable on white or black.
Examples
#f4511e#f4511e
rgb(244 81 30)
hsl(14 91% 54%)
hsv(14, 88%, 96%)
cmyk(0%, 67%, 88%, 4%)
Contrast with white 3.48:1 (AA large text only), with black 6.04:1 (AA)rgb(30 144 255)#1e90ff
rgb(30 144 255)
hsl(210 100% 56%)
hsv(210, 88%, 100%)
cmyk(88%, 44%, 0%, 0%)
Contrast with white 3.24:1 (AA large text only), with black 6.49:1 (AA)hsl(150 60% 40%)#29a366
rgb(41 163 102)
hsl(150 60% 40%)
hsv(150, 75%, 64%)
cmyk(75%, 0%, 37%, 36%)
Contrast with white 3.22:1 (AA large text only), with black 6.53:1 (AA)Good to know
- CMYK values are a simple mathematical conversion. Real print colours depend on the printer’s colour profile, so ask your printer for exact values.
- Reads HEX, rgb(), rgba(), hsl(), hsla() and 20 basic colour names. Other CSS colour names, hwb(), lab() and oklch() are not supported yet.
- Values are rounded to whole numbers, so converting back and forth can shift a channel by 1.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and read each pair as a base-16 number: #1e90ff becomes 1e = 30, 90 = 144, ff = 255, so rgb(30 144 255).
What contrast ratio do I need?
WCAG 2 asks for at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold) at level AA. Level AAA asks for 7:1.
What is the difference between HSL and HSV?
Both describe hue and saturation, but HSL’s lightness runs from black through the pure colour to white, while HSV’s value runs from black to the pure colour. Design apps often use HSV in their pickers; CSS uses HSL.
Related tools
More tools that pair well with this one.