What this tool does
Enter a color in one format and the others update: HEX, RGB, HSL and CMYK. There is a color picker and a preview swatch, so you can pick visually and copy the CSS value.
Formats in brief
- HEX is
#RRGGBB, the usual way colors appear in CSS. - RGB gives red, green and blue from 0 to 255.
- HSL gives hue (0 to 360 degrees), saturation and lightness in percent. It is easier to adjust by hand: raise the lightness to make a color lighter without changing its hue.
- CMYK gives cyan, magenta, yellow and black in percent.
About the CMYK numbers
The CMYK value is a straight mathematical conversion from RGB. It is useful as a rough starting point, but it is not a print-accurate conversion. Real print work uses ICC profiles, and the same RGB color gives different CMYK values depending on the paper and press. If a color matters in print, ask your printer for their profile.
Practical uses for web work
- Turning a brand color given as RGB into HEX for a stylesheet
- Finding a lighter or darker shade by adjusting HSL lightness
- Building a color scale for a theme
Contrast matters too: a color that looks fine to you can fail accessibility checks. The usual target is a contrast ratio of 4.5:1 for body text. This tool does not calculate contrast.
Is the CMYK output suitable for print?
No. It is a mathematical conversion from RGB with no colour profile. Use your printer’s profile for print work.
Does it accept colour names like tomato?
The tool is built around HEX, RGB, HSL and CMYK values. Use one of those, or the picker.
Why does HSL give slightly different RGB numbers after a round trip?
Values are rounded to whole numbers at each step, so a small difference is normal.
Does it check contrast for accessibility?
No. Use a contrast checker to test text and background colours against the 4.5:1 target for body text.
Which colour formats does it convert between?
HEX, RGB, HSL and CMYK. A colour picker and a preview swatch sit next to the values.