What it does
The Color Converter converts a colour between HEX, RGB, HSL, HSV and CMYK. It also shows a row of lighter and darker shades, and the contrast ratio of white and black text on the colour, with its WCAG grade.
How to use it
- Type any CSS colour: a hex code (
#4f46e5),rgb(),hsl()or a name such asteal. Or pick one with the colour picker. - Copy any of the formats.
- Click a shade to use it as the new colour.
- Check the contrast results before using the colour behind text.
Example
#4f46e5:
| Format | Value |
|---|---|
| RGB | rgb(79, 70, 229) |
| HSL | hsl(243, 75%, 59%) |
| HSV | hsv(243, 69%, 90%) |
| CMYK | cmyk(66%, 69%, 0%, 10%) |
White text on it has a contrast of 6.29:1 (AA); black text only 3.34:1 (AA Large).
Contrast grades
| Grade | Ratio | Meaning |
|---|---|---|
| AAA | 7:1 or more | Best for body text |
| AA | 4.5:1 or more | Minimum for normal text |
| AA Large | 3:1 or more | Large or bold text only |
| Fail | below 3:1 | Avoid for text |
Good to know
- CMYK values here are a simple conversion. Printers use colour profiles, so ask your printer for exact values for important print work.
- HSL is the easiest format for making a colour lighter or darker by hand: change only the last number.
FAQ
What is the difference between HSL and HSV? Both describe hue and saturation. HSL's lightness runs from black through the pure colour to white; HSV's value runs from black to the pure colour. Design tools often use HSV (or HSB) in their pickers.
Why does the hex code come out in lower case?
Case does not matter in CSS; #4F46E5 and #4f46e5 are the same colour.