Colour converter (HEX / RGB / HSL / HSV / CMYK)

Colour notations, and when each one is the right tool

A colour is a point in a colour space; a notation is just one way of writing that point down. HEX writes the three RGB channels in base 16, so #2f6bff is red 47, green 107, blue 255. It is compact, it is what CSS has always used, and it is what designers paste into Slack. Six digits can be shortened to three when each pair repeats (#36f = #3366ff).

RGB is the same information in decimal, which makes it the natural form for computation — blending, opacity maths and canvas work all live here. Modern CSS also allows the space-separated form rgb(47 107 255) and an alpha channel, rgb(47 107 255 / 0.6).

HSL re-expresses the colour as hue (0–360°), saturation and lightness. This is the one to reach for when you are designing rather than coding, because lightness is an independent axis: darken a button on hover by lowering L, and the hue stays put. HSV is a close cousin that most colour pickers use internally; its value axis runs from black to full-intensity colour, so it maps more directly to how a picker feels.

CMYK is the odd one out. Screens emit light; printers deposit cyan, magenta, yellow and black ink on paper. The printable gamut is narrower than sRGB, so vivid screen colours — electric blues and bright oranges especially — come out duller. Converting here gives you the arithmetic answer, not a guarantee: for anything expensive, print a proof first.

Finally, contrast. Placing text on a colour is the most common way an otherwise good palette fails accessibility. WCAG AA asks for a contrast ratio of 4.5:1 for normal text (3:1 for large text), and AAA asks for 7:1. The ratio shown here is computed for pure white and pure black over your colour, which is usually enough to decide which of the two to use.

Frequently asked questions

Why does the printed result look different from the screen?

Screens emit light in RGB; printers lay down ink in CMYK. The printable gamut is smaller, so bright saturated screen colours lose punch on paper. Always proof important material before a print run.

What contrast ratio should I aim for?

WCAG AA requires 4.5:1 for normal body text and 3:1 for large text; AAA raises those to 7:1 and 4.5:1. The contrast figures shown here are for white and black text over your colour.

Is HEX or RGB better?

Neither is better — they hold the same information. HEX is compact and is what designers copy around; RGB is easier to compute with; HSL is the easiest to adjust by hand because lightness is its own axis.