HEX, RGB, HSL, CMYK and named colours, what's the difference?
- HEX (e.g.
#4F46E5), the compact format used in CSS and design tools. - RGB (e.g.
rgb(79, 70, 229)), red, green and blue channels from 0-255. - HSL (e.g.
hsl(244, 76%, 59%)), hue, saturation and lightness, which is intuitive for tweaking shades. - CMYK (e.g.
cmyk(66%, 69%, 0%, 10%)), cyan, magenta, yellow and key (black), the subtractive model used for print. - Named colour (e.g.
rebeccapurple), the closest match among the 147 CSS colour keywords, handy when you want a plain-English name instead of a code.
How to use it
Use the colour picker, or type into the HEX, RGB, HSL, CMYK or Name field. Every other field updates instantly to match, and the copy buttons put any format on your clipboard, ready to paste into CSS, a design tool or code.
Frequently asked questions
Can I convert any format back to any other?
Yes. Type a HEX code, an RGB or HSL string, a CMYK string, or a CSS colour name into its field and all the others update to match.
Is the named colour always an exact match?
Only when your colour lines up exactly with one of the 147 CSS colour keywords. Otherwise it shows the closest one, labelled "Closest" instead of "Exact".
Is the CMYK value accurate for professional printing?
It's the same on-screen approximation used by most design tools, useful as a reference. For print production, check with your printer's colour profile.
Does it work offline?
Yes, once the page has loaded.
What formats are supported?
It converts between HEX, RGB, HSL and CMYK, and matches your colour to the closest named CSS colour, with a colour picker.