Color Converter

Designers hand over a hex code, a stylesheet wants HSL, and a print job wants CMYK. This converter takes a colour in whatever form you have it (a hex code with or without the hash, an rgb() or hsl() function, or a CSS name like tomato) and shows it in all the common formats alongside a swatch. If the colour matches a named one exactly, it says so.

How to use it

1. Type or paste a colour, such as #f6b82f, rgb(246, 184, 47) or tomato.
2. Read every format in the result.
3. Check the swatch matches what you meant.
4. Copy the format you need.

When it helps

• Moving a colour from a design file into CSS.
• Converting between web and print values.
• Finding HSL values so you can tweak lightness or saturation.
• Looking up what a named colour is in hex.

Good to know

• HSL is the easiest format to adjust by hand, because lightness and saturation are separate dials.
• CMYK here is a plain mathematical conversion. A printer's own colour profile will give slightly different results.
• Three-digit hex is expanded, so #f80 is read as #ff8800.

Colour models explained

RGB describes colour as amounts of red, green and blue light, each from 0 to 255, and is how screens work. Hex is the same thing in base 16. HSL describes hue as an angle on the colour wheel, saturation as intensity, and lightness from black to white, which matches how people think about colour.

CMYK describes ink amounts, cyan, magenta, yellow and black, for printing, and HSV (or HSB) is a variant of HSL used in many design tools.

Worked example: one colour, many forms

The amber #F6B82F is rgb(246, 184, 47), hsl(42, 92%, 56%), hsv(42, 81%, 96%) and cmyk(0, 25, 81, 4). In CSS you can use any of the first three. To make a hover state, copy the HSL and lower the lightness by a few points.

If you enter a name like tomato, the tool shows its hex, #FF6347, and the other formats.

Print versus screen

Screens can display colours that printers can't, particularly bright blues and greens, so a conversion from RGB to CMYK may look duller on paper. The tool uses the simple mathematical conversion, while real printing depends on inks, paper and a colour profile.

For print work, ask your printer for their profile and check a proof.

Colour names and CSS keywords

CSS defines about 140 colour names, from aliceblue to yellowgreen, plus the keywords transparent and currentColor. Names suit quick prototypes and readable code, but they cover only a tiny fraction of the 16.7 million colours a screen can show, so most real designs use hex or HSL.

If you enter a name, the tool shows the hex value, and if your colour matches a name exactly it tells you, useful for tidying up old stylesheets.

Questions