What is Color Converter?

Color Converter translates between HEX, RGB, HSL, HSV, and CMYK formats. Pick a color or type a value, and see the result in every format with a live visual preview.

Pick from the visual colour wheel or type into any of five linked fields — HEX, RGB, HSL, HSV, CMYK — and every other field updates in real time. HSV (sometimes written HSB) is included alongside HSL, which is useful when working with Photoshop or Sketch values that don't appear in plain CSS tooling.

How to use

1. Step 1 — Pick a color visually using the interactive color picker, or type a value in any format field.
2. Step 2 — All other format fields update at once, so you always see the equivalent value in every format.
3. Step 3 — Copy any format value, or use the color picker to fine-tune. Every field updates live as you go.

When to use

• Sampling a colour off the picker and copying the matching CMYK for an Illustrator file.
• Tweaking HSV values from a Photoshop palette and reading the equivalent CSS HSL.
• Building a palette from scratch by dragging the picker and noting the HEX each time.

Result

A print designer needs the CMYK values for a web color rgb(0, 128, 255). The tool converts it to cmyk(100%, 50%, 0%, 0%) for accurate print reproduction.

FAQ

Why include both HSL and HSV when they look similar?

HSL pairs with CSS and most web tooling; HSV (aka HSB) is the default in Photoshop, Sketch, and most native colour pickers on macOS and Windows. Designers move between both worlds constantly, so the converter gives both rather than forcing a translation step.

Can I edit any field directly, or just the picker?

Every field is editable. Type a HEX, or type new RGB / HSL / HSV / CMYK numbers and the picker plus the other fields catch up. The tool keeps the colour in sync no matter which input you change.

Why does HSL show 0 for both saturation and lightness on grey?

Pure grey has no hue and no saturation. By convention HSL stores hue as 0 when saturation is 0, since a grey has nowhere on the colour wheel to live. It's mathematically correct, just easy to misread as "missing data".

What does the CMYK K channel mean?

K stands for Key, which in practice is black. Adding K instead of mixing C+M+Y to make near-black saves expensive coloured ink in printing and avoids the muddy brown that pure CMY mixing tends to produce. The converter calculates K automatically.

Does the picker work with a stylus or touch screen?

Yes. The colour picker is a standard input element, so pen, finger, and trackpad all work. On touch you tap the colour and a system picker opens; on desktop a click opens the wheel. The numeric fields are easier for precise values.

Related Tools