Color Converter

How to convert a color code online

This color converter works in both directions from a single shared value, so you never have to know which format you're "starting from." Type into the Hex field to convert hex to RGB, HSL, HSV, CMYK and OKLCH all at once; type into the RGB field to convert RGB to hex and every other format the other way. Enter HSL, HSV/HSB, CMYK or OKLCH directly and the rest — including hex — follow instantly. Every output field has its own copy button, plus a closest web-safe color and the closest standard color name, so you rarely need a second lookup.

If you only ever need one direction, the dedicated RGB to hex converter and hex to RGB converter pages focus the same engine on a single conversion with the right field pre-focused.

Hex, RGB, HSL, HSV, CMYK and OKLCH explained

A hex code like #FF5A36 packs red, green and blue into six base-16 digits — it's the format CSS, HTML and most design tools expect by default. RGB is the same three channels written as plain 0–255 numbers, which is what canvas APIs, image files and many older tools use. HSL and HSV/HSB both separate hue from how saturated and how light or bright a color is, which makes them easier to reason about by hand — "same hue, darker" is a one-number change in HSL, but a three-number change in RGB. CMYK approximates how a color prints as cyan, magenta, yellow and black ink, useful for a rough preview before a real print profile is applied. OKLCH is the newest of the six: a perceptually-uniform space, now supported directly in CSS, where equal numeric steps produce equally-spaced visual steps — the property that makes it good for generating consistent shade ramps.

Color converter use cases

• Handing off a design — a developer pastes the hex from a design file and gets RGB, HSL and CMYK without opening design software.
• Matching a screenshot — convert a sampled RGB value back to hex for a stylesheet.
• Print prep — check the approximate CMYK breakdown of a screen color before sending it to a printer.
• Modern CSS — convert an existing hex palette to OKLCH to take advantage of CSS Color Level 4 gradients and mixing.

Why the same color has different numbers in every format

Every color format is just a different coordinate system pointing at the same physical color. Hex and RGB use the same three axes (red, green, blue) written in different number bases, so converting between them never loses anything. HSL and HSV rotate those axes into hue, saturation and lightness/value — more intuitive for a human, but the same underlying point. CMYK and OKLCH go further: CMYK models ink on paper rather than light on a screen, and OKLCH models how the eye perceives lightness and colorfulness. Because those last two describe genuinely different things, their numbers won't line up with RGB in any obvious way, and that's expected — you're seeing the same color measured against a different ruler.

Rounding and reversible conversions

Hex and RGB round-trip perfectly: #3B82F6 becomes rgb(59, 130, 246) and back with no drift. Conversions that pass through a different model — HSL, HSV, CMYK, OKLCH — involve floating-point math that gets rounded to whole numbers or a couple of decimals for display, so converting a hex to HSL and typing that HSL back in can land one unit away from where you started. It's imperceptible, but it's why this converter always keeps the exact underlying color and only rounds the text you see. When precision matters — say you're storing values in a design token file — copy the hex or RGB form as the source of truth and treat the others as derived.

Color converter FAQ