Acerca de esta herramienta
Cuatro notaciones para el mismo color sRGB
HEX, RGB, HSL y HWB son cuatro formas de escribir un color en sRGB, el espacio de color predeterminado de la web. HEX y RGB dan directamente los canales rojo, verde y azul, cada uno de 0 a 255. HSL da un ángulo de tono, una saturación y una luminosidad; HWB da el mismo ángulo de tono con una cantidad de blanco y una cantidad de negro mezcladas. Convertir entre ellas cambia la notación, no el color.
Un código hex de ocho dígitos como #5a3ff080, o un cuarto valor después de una barra como rgb(90 63 240 / 0.5), añade un canal alfa. La forma separada por espacios es la sintaxis de CSS Color Level 4 y funciona en todos los navegadores actuales; la forma con comas, rgba(90, 63, 240, 0.5), sigue ahí para herramientas más antiguas.
Qué aportan OKLCH y OKLab
OKLab es un espacio de color que Björn Ottosson diseñó en 2020 para que pasos numéricos iguales se perciban como pasos iguales a la vista. OKLCH es el mismo espacio en forma polar: luminosidad de 0 a 1, croma (cuánto color tiene) y un ángulo de tono. Dos colores OKLCH con la misma luminosidad se ven más o menos igual de claros, cosa que no ocurre en HSL, donde un amarillo y un azul al 50 % de luminosidad se ven muy distintos.
OKLCH también puede describir colores que una pantalla sRGB no puede mostrar. Cuando escribes uno, esta herramienta conserva su luminosidad y su tono y baja el croma hasta que el color cabe, y te avisa de que lo ha hecho.
Cómo se calcula la relación de contraste
WCAG 2 define el contraste como (L1 + 0.05) / (L2 + 0.05), donde L1 y L2 son la luminancia relativa del color más claro y del más oscuro. El resultado va de 1:1 para dos colores idénticos a 21:1 para negro sobre blanco.
El nivel AA pide al menos 4.5:1 para texto normal y 3:1 para texto grande; el nivel AAA pide 7:1 y 4.5:1. Texto grande significa al menos 24 píxeles CSS, o unos 18,7 píxeles en negrita. La relación que se muestra aquí se redondea hacia abajo, porque una combinación que mide 4.499:1 no alcanza 4.5:1.
Cómo calcula los valores esta herramienta
Las conversiones se hacen en JavaScript en tu navegador, con la función de transferencia de sRGB y las matrices de OKLab publicadas junto con el espacio de color. Cada salida se redondea a unos pocos decimales, elegidos para que el valor vuelva a dar el mismo color de 8 bits con estas fórmulas. Un navegador puede calcular OKLCH y OKLab con constantes ligeramente distintas, así que un valor OKLCH u OKLab pegado puede salir desviado uno o dos pasos de 255 en un canal, sobre todo en un verde saturado. El color con nombre más cercano es el que está a menor distancia en OKLab.