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.
Cómo usar
- Elige un solo color y lee siete métricas de brillo con barras horizontales dimensionadas al valor de la métrica.
- 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.
- 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.).
- 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
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.