Colour converter

The same colour has four common notations, and CSS, print and design tools each prefer a different one.

The four notations

HEX — #2E7D5B. Three pairs of hex digits for red, green and blue, each 00-FF (0-255). The web default, and the most compact.
RGB — rgb(46, 125, 91). The same three channels in decimal. Easier to manipulate in code.
HSL — hsl(151, 46%, 34%). Hue as an angle on the colour wheel, then saturation and lightness. Far more intuitive for adjusting a colour.
CMYK — cyan, magenta, yellow and key (black). Subtractive, for print.

Why HSL is worth using

RGB and HEX describe how a colour is produced, not how it looks. To make #2E7D5B 10% lighter in RGB you would have to adjust all three channels and hope the hue survives.

In HSL you change one number. Building a palette becomes trivial: keep the hue, vary the lightness for tints and shades, and vary the saturation for muted variants. This is why design systems are almost always defined in HSL even when they ship as HEX.

Contrast and accessibility

The relative luminance shown is the value WCAG uses for contrast ratios. It is not simple brightness — the channels are weighted (green counts for 71%, red 21%, blue 7%) because human vision is far more sensitive to green, and each channel is gamma-corrected first.

The thresholds that matter:

4.5:1 — minimum for normal body text at AA.
3:1 — minimum for large text (18pt, or 14pt bold) and for UI components.
7:1 — AAA for body text.

Contrast is a property of a pair of colours. The figures here are against pure white and pure black, which is a useful first check when picking text colour for a background.

CMYK will not match your screen

The conversion here is the standard naive formula, and it is genuinely approximate. RGB is additive — light being emitted — while CMYK is subtractive, ink absorbing light. The two gamuts do not overlap fully.

Bright, saturated screen colours, especially vivid blues and greens, simply cannot be reproduced in four-colour process printing. Anything going to press needs conversion through a proper ICC profile for the specific paper and press, done in software that can soft-proof it. Treat this output as indicative only.

Shorthand hex

#F0C is shorthand for #FF00CC — each digit is doubled. It only works when all three pairs happen to be repeated digits, which is why it appears mostly on primary and web-safe colours. The calculator accepts both forms.

Common questions

How do I convert HEX to RGB?

Split the six digits into three pairs and read each as a hexadecimal number from 00 to FF, giving 0 to 255. 2E is 46, 7D is 125, and 5B is 91.

Why use HSL instead of HEX?

Because HSL separates hue from lightness and saturation, so you can make a colour lighter or more muted by changing one number. Doing the same in HEX means adjusting all three channels and hoping the hue survives.

What contrast ratio do I need for accessibility?

WCAG AA requires 4.5:1 for normal body text and 3:1 for large text and UI components. AAA raises body text to 7:1. Contrast is always between a specific pair of colours.

Why does my CMYK colour look different when printed?

RGB emits light and CMYK absorbs it, and their gamuts do not fully overlap — vivid screen blues and greens are outside what four-colour printing can reproduce. Real print work needs an ICC profile for the specific press and paper.