HEX vs RGB vs HSL

One gamut, three notations

sRGB is the default colour space of the web: the spectrum a typical display shows, defined so that every browser, from a phone to a calibrated studio monitor, means the same colour by the same numbers. Each channel runs 0 to 255, which is why 16,777,216 colours (256 cubed) used to be quoted as the size of the web palette. A notation is just a user interface for those three numbers — and for alpha, a fourth number that controls opacity.

Because all three notations resolve to the same channels, conversion between them is exact arithmetic, never approximation. A tool that reports #FF6600 as hsl(24, 100%, 50%) is not offering an opinion; it is doing the same algebra the CSS spec defines. That is also why the format you write has zero effect on rendering — it is purely about the human editing the line.

HEX: compact, portable, opaque

A six-digit HEX code is three bytes in hexadecimal: FF is 255, 66 is 102, 00 is zero. The form dates to the earliest HTML and survives because it is unbeatable as an identifier — short, unambiguous, quote-free. If the two digits of each channel match (FF, 66, 00), CSS also accepts three digits: #F60. Since CSS Color 4, appending two more digits adds alpha: #FF6600AA is the same orange at about 67% opacity.

HEX's weakness is composition. Look at #FF6600 and ask what it will look like 15% darker, or what its complement is, and the answer requires decoding hexadecimal in your head. Darkening #FF6600 by eye produced a generation of #E65C00 guesses. HEX is the format for storing a colour, not the format for reasoning about one — which is exactly the gap HSL was invented to fill.

RGB: the additive model, stated plainly

Screens do not reflect paint; they emit light, and RGB is additive: black is all channels off, white is all on, and every colour is a mixture. rgb(255, 102, 0) says it plainly — full red, some green, no blue. This is the notation that matches the physics, which makes it the natural choice when you are debugging a rendered value, reading image data, or blending light itself (add two RGB colours and you get a brighter result, the opposite of mixing paint).

Its alpha form, rgba(), predates the 8-digit HEX variant. CSS Color 4 also modernised the syntax: rgb(255 102 0 / 0.67) — spaces and a slash instead of commas — is equivalent, and the a is now optional since rgb() accepts four values. Browsers have supported both spellings since around 2023.

HSL: the human-legible wheel

HSL rewrites the same channels as hue (an angle on the colour wheel, 0 to 360: red at 0, green at 120, blue at 240), saturation (0% is grey, 100% is fully vivid) and lightness (0% black, 100% white). Its superpower is legible relationships. Need a hover state 10% lighter? hsl(24, 100%, 50%) becomes hsl(24, 100%, 60%) — one number moved, the intent visible in the diff. Need a five-step brand scale? Hold hue and saturation, vary lightness. In HEX, every one of those edits is a recalculation.

The honest caveat: HSL's lightness is not perceptual. hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) both claim 50% lightness, yet the yellow blazes while the blue reads nearly black. Scales built on HSL lightness therefore look uneven to the eye. CSS Color 4 added oklch() to fix exactly this — a cylindrical notation whose lightness matches human perception, so equal steps look equal. For even scales, oklch is the modern answer; this site's colour tools compute ramps in OKLab, the perceptual space behind it.

Alpha and the modern color() function

Every notation above carries alpha the same way: as a 0-to-1 fraction of opacity. The spellings differ — #RRGGBBAA puts it in hexadecimal (AA is 170, about two-thirds opaque), rgba() and hsla() take a comma-separated fraction, and the modern space-separated syntax writes it after a slash. All produce identical results; the 8-digit HEX form is simply the most compact and the one design tools export most.

color() is the bigger shift. It names the colour space explicitly — color(srgb r g b) is the familiar gamut spelled out, while color(display-p3 ...) addresses the wider gamut of modern screens, and color(oklch ...) exposes the perceptual model. sRGB remains the safe default — content authored in it renders predictably everywhere — while display-p3 colours land only where the syntax is supported, essentially all evergreen browsers since 2023.

• #RRGGBBAA — alpha in hex, AA = 170 ≈ 67% opacity.
• rgba(255, 102, 0, 0.67) — legacy comma syntax, still universal.
• rgb(255 102 0 / 0.67) — CSS Color 4 syntax; the a is optional now.
• color(display-p3 1 0.4 0 / 0.67) — wider-gamut colour, space named up front.

Contrast: the check that outranks taste

No notation choice matters if users cannot read the text. WCAG contrast requires a ratio of at least 4.5:1 between text and its background for normal text at AA level, 3:1 for large text (roughly 24 px regular or 19 px bold and above), and 7:1 for the stricter AAA level. The ratio is computed from relative luminance, which is a property of the colour itself — the notation you wrote it in is irrelevant, which is one more way all these formats are the same colour.

The practical workflow is mechanical: pick colours however you like, then verify pairs before shipping. Body copy over its background, placeholder text over inputs, white text over the brand colour — each pair needs its number. A contrast checker reports it instantly — cheaper than retrofitting an inaccessible palette under deadline.