Skip to content
AZ Tools

Color Brightness Compare (HSL vs Lab L* vs WCAG vs HSP)

Every UI tool that talks about color 'lightness' or 'brightness' means something different. HSL L is the midpoint between the darkest and lightest RGB channel — pure yellow #ffff00 and pure blue #0000ff both score L=50% even though one is blindingly bright and the other looks black on screen. HSV V is even worse, returning the maximum channel; pure red, green, and blue all hit V=100%. WCAG Y (relative luminance) is what the contrast-ratio algorithm uses — it gamma-decodes sRGB to linear light and weights by photopic sensitivity (0.2126 R + 0.7152 G + 0.0722 B), so yellow is genuinely bright and blue is genuinely dark. CIE Lab L* takes that physical luminance and remaps it through a cube-root perceptual curve so that equal L* steps look equal to a human observer. Rec. 709 Luma is the broadcast-television proxy (gamma-encoded, same weights as WCAG). HSP is Darel Rex Finley's psychophysical fit. This tool shows all seven for one color or a pair and lets you watch how the rankings disagree.

—
Brightness metrics
HSL Lightness (L)
59.8
(max RGB + min RGB) / 2. Pure yellow and pure blue both score 50%. Not perceptual at all.
HSV Value (V)
96.5
Max RGB channel. Pure red, green, and blue all hit 100%. Even less perceptual than HSL L.
WCAG Relative Luminance (Y · LRV)
23.5
Gamma-decoded linear luminance: 0.2126 R + 0.7152 G + 0.0722 B. Used by WCAG contrast ratios. Same as Light Reflectance Value (LRV) × 100.
CIE Lab L* (perceptual lightness)
55.6
CIE 1976 L* — perceptually uniform lightness. Equal L* steps look equal to a human observer. Y = 18% → L* = 50.
Rec. 709 Luma (Y′)
48.3
Rec. 709 luma (Y′) on gamma-encoded sRGB. The broadcast television approximation; sits between HSL L and WCAG Y.
HSP Perceived Brightness
52.4
Darel Rex Finley's HSP: √(0.299R² + 0.587G² + 0.114B²). Better than naïve average, faster than CIE Lab.
Naïve (R+G+B)/3
56.9
(R + G + B) / 3. Treats green as equal to blue. Included only as a cautionary baseline.
Read this
If the metrics disagree wildly — especially HSL L vs Lab L* / WCAG Y — your color choice will surprise users. Trust Lab L* (or OKLCH L) for perceptual decisions, WCAG Y for accessibility.
Tricky example pairs

How to use

  1. Pick a single color and read seven brightness metrics with horizontal bars sized to the metric value.
  2. Switch to Pair mode to drop a second color and see the delta on each metric — useful for diagnosing why a palette feels uneven.
  3. Click an example to load a deliberately tricky pair (yellow vs blue at same HSL L, red vs green at same HSV V, etc.).
  4. Copy the report to share or paste into a design review.

Frequently asked questions

Which metric should I actually use?
It depends on the question. For accessibility contrast → WCAG Y / LRV (used by the contrast-ratio formula). For perceptually-uniform palettes or gradients → CIE Lab L* or OKLCH L. For broadcast video → Rec. 709 Luma. HSL L and HSV V are convenient handles for color pickers but say almost nothing about how bright a color looks. Never use (R+G+B)/3 — it's only included here so you can see how badly it ranks colors.
Why do yellow and blue both have HSL L = 50%?
HSL is defined as L = (max RGB + min RGB) / 2. Pure yellow #ffff00 has channels (255, 255, 0) → (255 + 0) / 2 = 50%. Pure blue #0000ff has (0, 0, 255) → (255 + 0) / 2 = 50%. HSL completely ignores that human eyes are about 10× more sensitive to green and yellow than to blue. It's a geometric construction over the RGB cube, not a perceptual model.
What's the difference between WCAG Y and Lab L*?
WCAG Y is photopic luminance — what a calibrated photometer would measure when pointing at the rendered pixel, normalized 0–1 (often reported as LRV × 100 in architecture). Lab L* is that luminance fed through L* = 116 × f(Y/Yn) − 16, where f is a cube-root function tuned to perception. So Y = 50% lands at L* ≈ 76 (much closer to white than to black perceptually), and Y = 18% lands at L* = 50 (medium grey).
What is HSP and why include it?
HSP (Hue/Saturation/Perceived-brightness) is a model by Darel Rex Finley that fits perceived brightness as P = √(0.299R² + 0.587G² + 0.114B²) on gamma-encoded RGB. It's the same Rec. 601 weighting as classic Y′ but with a Euclidean RMS instead of an arithmetic mean. It's not standardized but it's a popular drop-in when you want better-than-naïve brightness without doing a full sRGB→Lab conversion.

Guides on this topic

Related tools

Dew Point & Humidity Calculator

Calculate the dew point and absolute humidity from temperature and relative humidity using the Magnus formula, with a comfort rating in °C or °F.

Everyday 0 0

Color Contrast Checker

Check text/background contrast against WCAG AA and AAA levels.

Color 0 0

Color Mixer

Interpolate between two colors in RGB, HSL, or CIELAB space. See a gradient strip of intermediate steps.

Color 0 0

CSS color-mix() Preview (Interpolation Space Comparison)

Compare how the modern CSS color-mix() function blends two colors in different interpolation spaces (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — live swatches, computed hex, full gradient strip per space, and copyable CSS for each.

Color 0 0

Color Format Converter

Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.

Color 0 0

HSL Color Picker

Drag hue, saturation, lightness, and alpha sliders to dial in a color — copy HEX, RGB, HSL, or a Tailwind arbitrary value.

Color 0 0