Color Converter

Paste a color in any common format β€” HEX, RGB, HSL, HWB, CMYK or a CSS color name β€” and get it converted to every other format instantly. Free and private: everything runs in your browser.

#3b82f6
rgb(59, 130, 246)
hsl(217, 91%, 60%)
hwb(217 23% 4%)
cmyk(76%, 47%, 0%, 4%)

How to use the Color Converter

  1. Enter a color. Type or paste any color into the box above β€” a HEX code like #ff6600, an rgb(), hsl(), hwb() or cmyk() value, a bare triplet like 255, 102, 0, or a CSS color name like tomato. You can also use the visual picker.
  2. Read the conversions. The tool detects the format automatically and shows the same color as HEX, RGB, HSL, HWB and CMYK, with a live preview swatch.
  3. Copy what you need. Every output has its own copy button, and the "All formats" box lets you grab every value at once.

About this tool

Different tools speak different color languages: web designers use HEX codes and rgb() values in CSS, modern stylesheets increasingly use hsl() and hwb() because they are easier to reason about, and print workflows rely on CMYK ink percentages. This free online color converter translates between all of these formats in one place, so you can move a brand color from a style guide into CSS, or estimate how an on-screen color maps to print, without doing the math by hand.

All conversions are computed locally in your browser with standard color-space formulas β€” nothing is uploaded, logged or stored. Hue is reported in degrees (0–360), saturation, lightness, whiteness and blackness in percent, and CMYK as ink coverage percentages. If you only need one specific conversion, try the dedicated HEX to RGB and RGB to HEX tools.

Frequently asked questions

Which input formats are recognized?

3-, 4-, 6- and 8-digit HEX codes (with or without #), rgb()/rgba() with numbers or percentages, hsl()/hsla(), hwb(), cmyk() with values as percentages or 0–1 fractions, bare triplets like "255, 102, 0", and all 148 named CSS colors such as "rebeccapurple".

Why does converting to CMYK look different when printed?

This tool uses the standard naive RGB→CMYK formula, which assumes idealized inks. Real printing presses use ICC color profiles that account for specific inks and paper, so printed output can differ. Treat the CMYK values as a good starting point, not a press-ready specification.

What is HWB and when should I use it?

HWB describes a color as a hue plus amounts of white and black mixed in β€” the way painters often think. It is supported in CSS as hwb() and is handy for generating tints and shades of a base hue by only changing the whiteness or blackness numbers.

What happens to the alpha channel?

If you enter a color with transparency (an 8-digit HEX code or an rgba()/hsla() value), the tool converts the underlying color and ignores the alpha, since HWB and CMYK outputs have no transparency. A note appears whenever alpha was dropped.