AZ Tools

Comparador de Brillo de Color (HSL vs Lab L* vs WCAG vs HSP)

Color

Toda herramienta de UI que habla de 'luminosidad' o 'brillo' de color significa algo distinto. L de HSL es el punto medio entre el canal RGB más oscuro y el más claro — amarillo puro #ffff00 y azul puro #0000ff puntúan ambos L=50% aunque uno es cegadoramente brillante y el otro casi negro en pantalla. V de HSV es peor: devuelve el canal máximo, así que rojo, verde y azul puros llegan a V=100%. Y de WCAG (luminancia relativa) es lo que usa el algoritmo de ratio de contraste — gamma-decodifica sRGB a luz lineal y pondera con sensibilidad fotópica (0.2126 R + 0.7152 G + 0.0722 B), así que el amarillo es genuinamente brillante y el azul genuinamente oscuro. L* de CIE Lab toma esa luminancia física y la remapea con una curva perceptual de raíz cúbica para que pasos iguales de L* se vean iguales al observador humano. Luma Rec. 709 es la aproximación de televisión de difusión (gamma-codificada, mismos pesos que WCAG). HSP es el ajuste psicofísico de Darel Rex Finley. Esta herramienta muestra los siete para un color o un par y te deja ver cómo discrepan los rankings.

Métricas de brillo
HSL Lightness (L)
59.8
(max RGB + min RGB) / 2. Amarillo puro y azul puro puntúan ambos 50%. Nada perceptual.
HSV Value (V)
96.5
Canal RGB máximo. Rojo, verde y azul puros llegan al 100%. Aún menos perceptual que L de HSL.
WCAG Relative Luminance (Y · LRV)
23.5
Luminancia lineal gamma-decodificada: 0.2126 R + 0.7152 G + 0.0722 B. Usada por los ratios de contraste WCAG. Igual al Valor de Reflectancia Lumínica (LRV) × 100.
CIE Lab L* (perceptual lightness)
55.6
CIE 1976 L* — claridad perceptualmente uniforme. Pasos iguales de L* se ven iguales para un observador humano. Y = 18% → L* = 50.
Rec. 709 Luma (Y′)
48.3
Luma Rec. 709 (Y′) sobre sRGB gamma-codificado. Aproximación de televisión de difusión; intermedia entre L HSL y Y WCAG.
HSP Perceived Brightness
52.4
HSP de Darel Rex Finley: √(0.299R² + 0.587G² + 0.114B²). Mejor que promedio ingenuo, más rápido que CIE Lab.
Naïve (R+G+B)/3
56.9
(R + G + B) / 3. Trata al verde igual que al azul. Incluido solo como línea base de advertencia.
Léelo
Si las métricas discrepan mucho — especialmente L HSL vs L* Lab / Y WCAG — tu elección de color sorprenderá a los usuarios. Confía en L* Lab (u L OKLCH) para decisiones perceptuales, en Y WCAG para accesibilidad.
Pares engañosos

Cómo usar

  1. Elige un solo color y lee siete métricas de brillo con barras horizontales dimensionadas al valor de la métrica.
  2. Cambia a modo Par para soltar un segundo color y ver el delta en cada métrica — útil para diagnosticar por qué una paleta se siente irregular.
  3. Haz clic en un ejemplo para cargar un par deliberadamente engañoso (amarillo vs azul con la misma L de HSL, rojo vs verde con la misma V de HSV, etc.).
  4. Copia el reporte para compartir o pegar en una revisión de diseño.

Preguntas frecuentes

¿Qué métrica debería usar realmente?
Depende de la pregunta. Para contraste de accesibilidad → Y WCAG / LRV (usada por la fórmula de ratio de contraste). Para paletas o gradientes perceptualmente uniformes → L* de CIE Lab o L de OKLCH. Para video de difusión → Luma Rec. 709. L de HSL y V de HSV son agarres convenientes para selectores de color pero dicen casi nada sobre cuán brillante se ve un color. Nunca uses (R+G+B)/3 — solo está incluido para que veas cuán mal clasifica colores.
¿Por qué amarillo y azul tienen ambos L de HSL = 50%?
HSL se define como L = (max RGB + min RGB) / 2. El amarillo puro #ffff00 tiene canales (255, 255, 0) → (255 + 0) / 2 = 50%. El azul puro #0000ff tiene (0, 0, 255) → (255 + 0) / 2 = 50%. HSL ignora por completo que los ojos humanos son ~10× más sensibles al verde y amarillo que al azul. Es una construcción geométrica sobre el cubo RGB, no un modelo perceptual.
¿Qué diferencia hay entre Y WCAG y L* Lab?
Y WCAG es luminancia fotópica — lo que un fotómetro calibrado mediría apuntando al píxel renderizado, normalizado 0–1 (a menudo reportado como LRV × 100 en arquitectura). L* Lab es esa luminancia pasada por L* = 116 × f(Y/Yn) − 16, donde f es función de raíz cúbica ajustada a la percepción. Así Y = 50% cae en L* ≈ 76 (mucho más cerca del blanco que del negro perceptualmente), y Y = 18% cae en L* = 50 (gris medio).
¿Qué es HSP y por qué incluirlo?
HSP (Tono/Saturación/Brillo-Percibido) es un modelo de Darel Rex Finley que ajusta el brillo percibido como P = √(0.299R² + 0.587G² + 0.114B²) sobre RGB gamma-codificado. Mismos pesos Rec. 601 que el Y′ clásico pero con RMS euclidiano en vez de media aritmética. No es estandarizado pero es popular cuando quieres mejor-que-ingenuo sin hacer conversión completa sRGB→Lab.

Herramientas relacionadas