OKLCH explicado: el formato de color que por fin coincide con lo que ves

Qué es OKLCH

OKLCH es la forma polar de Oklab, un espacio de color perceptual que Björn Ottosson publicó en 2020. Tiene tres números. L es la luminosidad percibida, de 0 (negro) a 1 o 100 % (blanco). C es el croma, la cantidad de color, de 0 (gris) hasta unos 0,37 en los colores más vivos que puede mostrar una pantalla. H es el ángulo del tono, de 0 a 360 grados.

Así se ve el mismo color escrito en distintos formatos. PickShade calcula cada valor en vivo, así que puedes copiarlos tal cual.

Por qué OKLCH es mejor que HSL

La luminosidad de HSL es una fórmula, no una percepción. hsl(60 100% 50%) es un amarillo brillante y hsl(240 100% 50%) es un azul oscuro, pero los dos dicen tener un 50 % de luminosidad. Si construyes una paleta con HSL, tendrás que corregir cada tono a mano.

En OKLCH, los colores con la misma L se ven igual de claros. Puedes fijar L y C y girar H para obtener un conjunto de tonos equilibrados, o fijar H y C y avanzar en L para obtener una escala de tonalidades limpia. Por eso Tailwind CSS v4 define toda su paleta por defecto en OKLCH.

La luminosidad también anticipa el contraste. Un texto con una diferencia de L de aproximadamente 0,4 o más respecto a su fondo suele leerse bien, lo que hace mucho más fácil razonar sobre colores accesibles.

Sintaxis en CSS

La luminosidad se escribe como porcentaje o como número de 0 a 1. El croma es un número. El tono es un ángulo en grados. La transparencia va después de una barra.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

Soporte en navegadores

oklch() funciona en todos los navegadores actuales: Safari desde la 15.4, Chrome y Edge desde la 111, Firefox desde la 113. Eso cubre a bastante más del 90 % de los usuarios. Para navegadores muy antiguos, pon un valor HEX de respaldo en la línea anterior al valor OKLCH.

color: #ff5733;
color: oklch(68% 0.21 33.7);

Límites de croma y gama de colores

OKLCH puede describir colores que ninguna pantalla puede mostrar. El croma máximo depende de la luminosidad y del tono: un amarillo vivo solo es posible con una luminosidad alta, y un azul vivo solo con una luminosidad baja. Cuando un valor queda fuera de la gama sRGB o Display P3, el navegador lo devuelve a la gama, y eso puede cambiar el color.

PickShade marca los colores fuera de sRGB y te da el color más cercano que cabe, obtenido bajando el croma sin tocar la luminosidad ni el tono, el mismo método que recomienda CSS Color 4.

Cómo convertir HEX a OKLCH

La conversión pasa de HEX a sRGB, de sRGB a luz lineal, de sRGB lineal al espacio de conos LMS, aplica una raíz cúbica, una matriz hacia Oklab y, por último, pasa de Oklab a coordenadas polares. Hacerlo a mano es fácil que salga mal, así que pega cualquier color en el conversor y copia el resultado.

Preguntas y respuestas