HEX, RGB, HSL and OKLCH: Choosing a Colour Format

HEX and RGB: the same numbers in two notations

Screens mix red, green and blue light, and in the standard sRGB space each channel runs from 0 to 255, giving about 16.7 million combinations. RGB notation writes the three numbers directly: rgb(59 130 246). HEX writes the same three numbers in base 16, two digits each: 59 is 3B, 130 is 82 and 246 is F6, so the colour is #3B82F6. A three-digit HEX such as #39F is shorthand for #3399FF.

Transparency adds a fourth channel, alpha. In HEX it is two more digits (#3B82F680 is about 50% opaque), and in modern CSS it follows a slash: rgb(59 130 246 / 50%). Because HEX and RGB are just notations for the same values, converting between them never loses anything.

HSL: easy to adjust, misleading about lightness

HSL describes a colour as hue (an angle from 0 to 360, red at 0, green at 120, blue at 240), saturation and lightness. It is convenient for making variations by hand: keep the hue and change lightness for a darker shade, or rotate the hue for a matching accent. Our blue is about hsl(217 91% 60%).

The catch is that HSL lightness is a formula, not what the eye sees. Pure yellow and pure blue are both hsl(… 100% 50%), yet yellow is many times brighter: its relative luminance is about 0.93 against 0.07 for blue. A palette built by changing only HSL lightness therefore looks uneven, and text contrast cannot be judged from HSL values; it has to be calculated from luminance.

OKLCH: built around perception

OKLCH, part of CSS Color Level 4 and supported by current major browsers, describes colours by perceived lightness, chroma (colourfulness) and hue. Two colours with the same OKLCH lightness look about equally light, so steps in a palette look even, and changing the hue keeps the apparent brightness steady. That makes it well suited to design systems and generated palettes.

OKLCH can also describe colours outside sRGB, such as the wider Display P3 range many modern screens show. On a display that cannot show them, the browser maps them to the nearest colour it can. When a design must look identical everywhere, keep important colours inside sRGB.

Screen colour is not print colour

Printers mix cyan, magenta, yellow and black ink on paper, which reflects light rather than emitting it. Many bright screen colours, especially vivid blues and greens, simply cannot be printed, and the same CMYK values look different on different papers and presses. Converting RGB to CMYK properly depends on a colour profile for the actual printing conditions.

A simple formula that turns RGB numbers into CMYK percentages gives a starting point, not a print-ready colour. For brand colours that must match in print, ask the printer which profile to use or pick from a printed swatch system, and check a proof.

Which format to use

For copying a colour between tools, HEX is the most widely accepted. For transparency and readable code, modern rgb() with a slash is clear. For tweaking shades by hand, HSL is intuitive as long as you check the result by eye. For palettes, themes and gradients that need even steps, OKLCH gives the most predictable results.

Whatever the format, test text and background pairs with a contrast checker. WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at level AA, and no colour format guarantees that by itself.

• Use HEX or rgb() to copy colours between tools without loss
• Do not judge brightness or contrast from HSL lightness
• Use OKLCH for palettes that need evenly spaced shades
• Keep key colours inside sRGB if they must look the same everywhere
• Get print colours from the printer's profile, not a simple formula
• Check every text colour against its background for contrast