Color spaces: HEX, RGB, HSL and why HSL lies about brightness

What a color space is

A screen produces color by mixing three lights: red, green and blue. That is additive synthesis, all off gives black; all at maximum gives white. A color space is simply a coordinate system for pointing at a specific color within what the device can display. Almost the entire web uses the sRGB gamut, the standard color set of ordinary monitors; HEX, RGB, HSL and HSV are different notations for points inside that same gamut.

Two distinctions organize everything that follows. First: switching notation (RGB to HSL) does not change the color, only how you describe it; switching gamut (sRGB to Display P3) can change which colors exist. Second, less obvious and the heart of this guide: describing a color is not the same as measuring how it is perceived. HEX, RGB, HSL and HSV describe well; none of them measures perceived brightness. For that there is a parallel lineage of spaces, CIELAB, and more recently Oklab, built from how the human eye actually sees.

1. 1931CIE XYZ and the standard observer

   The CIE maps every visible color from color-matching experiments with human observers, creating the XYZ space, the mathematical basis for all the others.

2. 1976CIELAB (CIE L*a*b*)

   The CIE publishes L*a*b*, the first space designed to be perceptually uniform: equal distances should look like equal differences.

3. 1996sRGB becomes the web standard

   HP and Microsoft propose sRGB as the internet’s default space; it becomes the IEC 61966-2-1 standard in 1999. It is the gamut HEX, RGB and HSL assume by default.

4. 2020Oklab

   Björn Ottosson publishes Oklab, fixing CIELAB’s hue and lightness prediction, especially in the blues, for a screen’s gamut.

5. 2022–2023CSS Color 4 in browsers

   oklch() and oklab() land in Safari 15.4 (2022) and in Chrome, Edge and Firefox in 2023; they become Baseline "widely available" in May 2023.

HEX and RGB: the same color, by channel

RGB gives each channel’s intensity from 0 to 255. rgb(51, 102, 204) means: low red, medium green, high blue, a royal blue. HEX is the same thing in base 16 (hexadecimal): each pair of digits is one channel from 00 to FF, i.e. 0 to 255. So #3366CC = rgb(51, 102, 204): 33 in base 16 is 51, 66 is 102, CC is 204. There is no new information in HEX, just a shorter spelling, perfect for pasting into CSS.

HEX  ->  RGB   (cada par e um canal, base 16 -> base 10)
  33 = 3*16 + 3   = 51
  66 = 6*16 + 6   = 102
  CC = 12*16 + 12 = 204
#3366CC  =  rgb(51, 102, 204)

HEX de 3 digitos: #39C  ->  #3399CC  (cada digito e duplicado)
HEX de 8 digitos: #3366CC80  ->  os dois ultimos (80) sao o alfa

Two HEX conveniences: the 3-digit short form (#39C) doubles each digit to make 6, and the 8-digit form appends an alpha pair at the end. Alpha 80 in base 16 is 128, which divided by 255 gives about 0.50, half transparency. The modern CSS Color 4 syntax also accepts space-separated channels with alpha after a slash: rgb(51 102 204 / 50%) is the current way to write rgba(51, 102, 204, 0.5). Reach for RGB/HEX when you are speaking the machine’s language: channels, screens, code.

HSL: intuitive, but it lies about brightness

Nobody thinks "I need 40 more green and 20 less blue". We think "I want that same blue, just lighter". HSL (Hue, Saturation, Lightness) reorganizes color around that intuition: hue (H) is an angle from 0 to 360° on a wheel; saturation (S) runs from gray to pure color; and lightness (L) supposedly runs from black to white. The fatal detail is in L. It is not measured from the eye: it is a trivial reprojection of RGB, the arithmetic mean of the highest and lowest channel. Pure geometry of the RGB cube.

The two formulas have nothing in common. HSL’s L knows none of those weights: to it, "pure" red, green and blue are all identical, an L of 50%. Relative luminance knows the eye is ten times more sensitive to green than to blue. The result is the proof that HSL lies: a handful of colors with the same 50% L emit radically different amounts of light. Below, the real luminance of six colors that HSL insists on calling "50% light".

Step-by-step conversion (and the luminance HSL hides)

Let us convert #3366CC all the way to HSL and then compute the real luminance it carries, the arithmetic HSL never shows. First normalize each channel by dividing by 255; from there come lightness, saturation and hue by geometry; then linearize the channels and apply the perceptual weights:

#3366CC -> rgb(51, 102, 204)

1) Normaliza  (canal / 255)
   R = 51/255  = 0.20     G = 102/255 = 0.40     B = 204/255 = 0.80

2) HSL  (geometria do cubo RGB)
   max = 0.80   min = 0.20   delta = 0.60
   L = (max + min) / 2            = 0.50   -> 50%
   S = delta / (1 - |2L - 1|)     = 0.60   -> 60%
   H = ((R - G)/delta + 4) * 60   = 220 graus
   => hsl(220, 60%, 50%)

3) Luminancia relativa  (lineariza, depois pesa)
   lin(c) = ((c + 0.055)/1.055)^2.4    para c > 0.04045
   R_lin = 0.0331   G_lin = 0.1328   B_lin = 0.6038
   Y = 0.2126*0.0331 + 0.7152*0.1328 + 0.0722*0.6038
   Y = 0.146   -> 14.6% da luz do branco

O HSL diz L = 50%.  A luminancia real e 14.6%.  Nao sao a mesma coisa.

Look at the jump in step 3. HSL declares "L = 50%" for #3366CC, yet the pixel emits only 14.6% of a white’s light. The blame is double: blue, the dominant channel, has the smallest perceptual weight (0.0722), and linearization pushes mid values down further (a channel at 0.80 becomes 0.60 of light; one at 0.40 becomes just 0.13). HSL ignores both. Now the pair that closes the argument, two HEX with the same L and luminances on opposite ends of the scale:

1. Yellow #FFFF00rgb(255, 255, 0), normalized (1, 1, 0). max = 1, min = 0, so L = (1 + 0) / 2 = 0.50, HSL says 50%. Linearizing, the channel at 1 stays 1 and the channel at 0 stays 0, so Y = 0.2126×1 + 0.7152×1 + 0.0722×0 = 0.9278, that is, 92.78% of a white’s light.
2. Blue #0000FFrgb(0, 0, 255), normalized (0, 0, 1). max = 1, min = 0, so L = 0.50, HSL again says 50%. But Y = 0.2126×0 + 0.7152×0 + 0.0722×1 = 0.0722, only 7.22% of a white’s light.
3. The verdictTwo HSL colors identical in L (50%), and yellow emits nearly 13 times more light than blue. This is why the same "L" yields completely different perceived brightness, and why blue text can fail a contrast check that the same tone in yellow would pass easily. HSL’s "50%" is not a promise about brightness; it is just a point in the middle of the cube.

OKLCH: when "L" means brightness again

If the problem is that HSL’s L does not match brightness, the fix is to use a space whose lightness axis is perceptual. That is what Björn Ottosson published in 2020 with Oklab, and its polar-coordinate version, OKLCH (Lightness, Chroma, Hue). Ottosson optimized the space numerically over a large set of visually similar colors, correcting exactly where CIELAB erred most: hue prediction in the blues. In OKLCH an L of 0.5 really does look halfway between black and white, for any hue. CSS Color 4 adopted all of it: oklch(), oklab(), lab(), lch() and the color() function for wide gamuts.

The difference shows up dramatically in gradients. Ottosson’s own motivation was that "blending two colors should result in even transitions". That is why CSS Color 4 picked Oklab as the default interpolation space for gradients and the color-mix() function: the route between two colors becomes perceptually straight, without the gray that appears when interpolating in sRGB or the uneven banding of HSL. If you build color ramps for a color generator or for design tokens, it is the difference between a scale that "breathes" evenly and one that stalls in the middle.

Which to use when

HEX

The CSS and design-token default: short, comma-free, easy to copy. Use it to pin static colors.

RGB(A)

When you think in channels or need explicit alpha. The modern form is rgb(51 102 204 / 50%), with spaces and a slash.

HSL(A)

Good for quick hue tweaks and for varying tones within a color, but remember L is not perceived brightness.

OKLCH

The current pick for palettes, gradients and accessible scales: perceptual L, predictable hue, smooth interpolation.

CMYK / LAB

CMYK is for print (ink, subtractive synthesis, smaller gamut); LAB is for measuring color difference between two tones.

A note on measuring how "different" two colors are: in perceptual spaces like LAB, the distance between two points is called ΔE. A difference of about 1 ΔE sits at the threshold where a difference starts to be perceptible side by side; some studies place the just-noticeable difference (JND) near 2.3. That is why two "almost identical" blues in HEX can be obvious to the eye, and two "very different" yellows by the numbers can look like the same tone, distance in HEX is not the distance you see.

Alpha is orthogonal to all of this: it is the color’s opacity, from 0 (transparent) to 1 (opaque), available as rgb(... / a), hsl(... / a) or the final pair of an 8-digit HEX. And screen color is always sRGB and additive, while print color is CMYK and subtractive, with a smaller gamut, which is why a vivid orange on the monitor can come out duller on paper. It is not a conversion error; it is the print gamut not reaching that color.