Color Converter
Convert between HEX, RGB, HSL, HSV and CMYK.
Color Converter: the tool
Color
Type a HEX code such as #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%) or a CSS color name such as tomato.
Every format
Read as HSL. Press a value to copy it.
- HEX
- RGB
- RGB, modern syntax
- RGB, percentages
- HSL
- HSV (HSB)
- CMYK (approximate)
- Nearest CSS color name
Text on this color
- White text3.63:1✓ AA for large text only
- Black text5.76:1✓ AA for normal text
Type a color the way you have it, whether that is a HEX code, an rgb() or hsl() value, a CMYK mix or a CSS color name, and see it in every other format at once. Each value copies with one press. The tool also names the nearest CSS color and shows how white and black text would read on it, which is often the next question after a conversion.
How it works
Whatever you type is first turned into red, green and blue values from 0 to 255, the way a screen stores a color. Everything else is calculated from those three numbers. HSL and HSV turn them into a hue angle plus two percentages, and CMYK turns them into four ink amounts. Because the starting point is always RGB, converting between any two formats goes through the same exact step.
HSL and HSV share the hue but differ in their third value. HSL lightness is 0% for black, 50% for the pure color and 100% for white. HSV value is the brightness of the strongest channel, so 100% is the brightest version of the color and white is a color with no saturation. The shown values are rounded to whole numbers, as CSS usually writes them.
The nearest CSS color name is the keyword out of the 148 that CSS defines whose color is closest to yours, measured in OKLab, a color space built so that equal distances look about equally different. When your color is exactly a keyword, the row says so. Contrast with white and black text uses the WCAG formula, the same one as in the contrast checker.
How to use it
- Type a color in the field, choose one with the picker next to it, or press Pick a color from the screen if it is offered.
- Check the line that says how the text was read, such as HEX or HSL. A message explains anything that could not be understood.
- Press any value in the list to copy it.
- Look at the two boxes under the list to see whether white or black text is easier to read on the color.
Example
One color typed as hsl(217, 91%, 60%) and converted by the same code as the tool above.
What was set
- Typed
- hsl(217, 91%, 60%)
What came out
- HEX
- #3C83F6
- RGB
- rgb(60, 131, 246)
- HSL
- hsl(217, 91%, 60%)
- HSV
- hsv(217, 76%, 96%)
- CMYK
- cmyk(76%, 47%, 0%, 4%)
- Nearest CSS name
- dodgerblue
Good to know
- CMYK is the plain mathematical conversion, with no ink or paper profile, so it is a guide for print and not a proof.
- Everything is in the sRGB space of the web. Colors in wider spaces such as Display P3, and in spaces such as CIELAB or OKLCH, are not covered.
- HSL, HSV and CMYK are shown as whole numbers. Reading them back can give a color that differs by a few steps in a channel from the one you started with, while HEX and RGB convert without any loss.
Questions people ask
Which color formats can I type?
HEX with 3, 4, 6 or 8 digits and with or without the #, rgb() and rgba() with commas or spaces, hsl() and hsla(), hsv() or hsb(), cmyk(), three plain numbers such as 255, 99, 71, and any of the 148 CSS color names in any case.
Why does converting back give a slightly different color?
HSL, HSV and CMYK values are rounded to whole numbers when they are shown, and there are more possible colors in those models than whole-number triples. HEX and RGB hold the exact color. Keep one of those as your master copy.
Why does my CMYK value not match another program's?
Programs that manage color apply a printer profile, and the profile changes the numbers. This tool uses the simple formula without one, so it matches other profile-free converters and not a print workflow.
What does it mean when the name says nearest?
CSS has only 148 color names, so most colors have none of their own. The nearest name is the one that looks most like your color. A color that is exactly one of the keywords is labelled as that CSS color name instead.