Qué hace esta herramienta
Pega o elige cualquier color CSS y lo verás en HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, cada uno con su propio botón de copiar. Una muestra de color y un control deslizante de alfa muestran cómo se ve el color con transparencia. Debajo del conversor, un verificador de contraste compara dos colores con los umbrales de WCAG 2 y muestra una vista previa con texto de ejemplo.
Modelos de color, en pocas palabras
- HEX y RGB describen un color como cantidades de rojo, verde y azul (0–255, o 0–100 %).
- HSL añade tono (hue), saturación y luminosidad, algo que suele ser más fácil de entender que los números de RGB.
- HWB (tono, cantidad de blanco, cantidad de negro) mezcla blanco y negro con un tono, útil para crear tintes y sombras.
- LAB y LCH describen el color de forma más cercana a como lo percibe el ojo humano: luminosidad (L) junto con los ejes verde-rojo/azul-amarillo (LAB) o con croma y tono (LCH).
- OKLCH es una versión más reciente y perceptualmente uniforme de LCH, pensada para la web actual.
Por qué es útil OKLCH
En HSL, mantener el mismo número de «luminosidad» mientras cambias el tono puede seguir viéndose mucho más claro o más oscuro a simple vista: un amarillo puro con L = 50 % se ve mucho más brillante que un azul con la misma L. El canal de luminosidad de OKLCH sigue de cerca el brillo que realmente se percibe, así que las paletas creadas ajustando solo el valor de luminosidad se mantienen visualmente coherentes entre distintos tonos, y puedes cambiar la saturación de un color sin alterar sin querer lo claro u oscuro que parece.
Cómo se calcula el contraste WCAG
El verificador de contraste sigue la fórmula de WCAG 2: calcula la luminancia relativa de cada color (una mezcla ponderada de sus canales de rojo, verde y azul en espacio lineal) y luego divide (L1 + 0,05) entre (L2 + 0,05), usando el color más claro como L1. El resultado es una relación como 4,5:1.
- AA, texto normal: 4,5:1
- AA, texto grande: 3:1
- AAA, texto normal: 7:1
- AAA, texto grande: 4,5:1
Por «texto grande» se entiende al menos 18 pt (unos 24 px) con peso normal, o 14 pt en negrita (unos 19 px).
Colores fuera del espacio de color
LAB, LCH y OKLCH pueden describir colores que ninguna pantalla común puede mostrar, porque cubren un rango más amplio que sRGB. Cuando ocurre esto, la herramienta te avisa y muestra en HEX y RGB el color más parecido que tu pantalla sRGB puede reproducir de verdad.