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

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.

Guías sobre este tema

• Contraste de color y paletas accesibles Qué miden en realidad las relaciones de contraste de las WCAG, por qué un color que se ve bien puede fallar igualmente, cómo cambia el panorama el daltonismo y cómo construir una paleta que aguante.

Herramientas relacionadas