Color Brightness Compare (HSL vs Lab L* vs WCAG vs HSP)
Color
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.
How to use
- Pick a single color and read seven brightness metrics with horizontal bars sized to the metric value.
- Switch to Pair mode to drop a second color and see the delta on each metric — useful for diagnosing why a palette feels uneven.
- Click an example to load a deliberately tricky pair (yellow vs blue at same HSL L, red vs green at same HSV V, etc.).
- 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.
Related tools
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.