Color Converter

One color, every format you need

A designer hands over a HEX code, a stylesheet wants hsl(), a print shop asks for CMYK, and newer CSS uses oklch(). This converter takes the color in whatever form you have and writes it in all the others, so you can copy the one you need without doing the math.

How to use it

1. Type or paste a color into the box, such as #ff8800, rgb(255 136 0) or tomato. Or click the square next to it to pick one.
2. Read every format below the swatch. Each has its own Copy button.
3. Choose spaces or commas for rgb() and hsl(), to match the rest of your CSS.
4. Check the nearest CSS color name, if you’d rather use a word.

The formats

• HEX is red, green and blue as pairs of hex digits; eight digits add transparency.
• RGB gives the same three channels as numbers from 0 to 255.
• HSL is hue (an angle on the color wheel), saturation and lightness, handy for making lighter or darker shades by hand.
• HWB is hue with the amounts of white and black mixed in.
• OKLCH is lightness, chroma and hue in a space built to match how people see, so equal steps look equal. Modern browsers support it in CSS.
• CMYK is cyan, magenta, yellow and black ink, from the simple formula: a starting point, not a print profile.

Good practice

• Pick one format for a project and use it everywhere, so colors are easy to search for and compare.
• Use OKLCH for shades: change only the lightness to get lighter and darker versions that still look like the same color.
• For print, send your printer the HEX or RGB value as well as the CMYK, and ask for a proof.

Good to know

• Values are rounded for display: HSL and HWB to one decimal place, OKLCH to two or four. Converting back lands on the same color, give or take one step in a channel.
• The nearest name is found by how alike the colors look, not by the closest numbers.
• Making a site icon in your colors? The Favicon Generator builds one from a picture, and SVG to PNG turns a logo into an image.