HEX, RGB, HSL and CMYK in one place
The same color can be written in several ways, and each notation suits a different job.
HEX is a six-digit code such as #FF8000, where each pair of digits is the red, green and blue amount in base 16. RGB writes the same three amounts as decimal numbers from 0 to 255, so #FF8000 becomes rgb(255, 128, 0). HSL describes a color as hue (an angle on the color wheel), saturation and lightness, which is easier to adjust by hand: hsl(30, 100%, 50%) is the same orange. CMYK lists cyan, magenta, yellow and black percentages, the model print workflows are based on: cmyk(0%, 50%, 100%, 0%).
HEX, RGB and HSL describe light on a screen. CMYK describes ink on paper, so the CMYK figures here are a mathematical conversion and not a guarantee of how a printer will reproduce the color.
When you need all four formats at once
Designers and developers constantly move between formats. A brand guide may list a HEX value, a stylesheet may want HSL so shades can be generated by changing one number, a design tool may ask for RGB, and a print shop may ask for CMYK.
Seeing every notation side by side saves you from running four separate conversions. It is also a quick way to learn how the formats relate: change the HEX code and watch how the hue, saturation and lightness shift.
If you only need one specific conversion, the dedicated HEX to RGB page does that job on its own.
How to use the color converter
- Click the color swatch to open your browser's color picker, or type a code in the text field next to it. The field starts with #5B4FF0.
- Four boxes underneath show the HEX, RGB, HSL and CMYK versions of the color.
- Select and copy the value you need from the box. The tool does not have copy buttons.
Conversion happens as you type, entirely in your browser. A three-digit shorthand like #F80 is understood and expanded to six digits, and the leading # is optional when typing.
Things to know before copying a value
The HSL and CMYK numbers are rounded to whole numbers, so converting a rounded value back may land a digit or two away from the original.
If the text in the field is not a valid color (for example, only five digits), the tool does not show an error. The RGB, HSL and CMYK boxes fall back to the starting color, while the HEX box still echoes what you typed in capital letters. If the results look suspiciously unchanged, check the HEX code first.
Transparency is not supported, so there is no alpha channel or eight-digit HEX input. To judge whether two colors are readable together, use the color contrast checker.