La sintaxis de oklch() y oklab() en CSS

La sintaxis de CSS Color 4 rompió con dos costumbres que llevaban veinte años: se acabaron las comas entre componentes y se acabó el rgba() aparte para la opacidad. Las funciones nuevas siguen todas el mismo patrón, así que aprender oklch() es aprender también lab(), color() y las cinco que quedan. Y trae una palabra clave, none, que parece un detalle y resulta ser la pieza que hace que las mezclas de tono se comporten.

La forma canónica

.a { color: oklch(62% 0.18 264); }
.b { color: oklch(62% 0.18 264 / 0.5); }
.c { color: oklab(62% -0.02 -0.17); }
.d { color: oklab(62% -0.02 -0.17 / 50%); }

Tres componentes separados por espacios, y el alfa detrás de una barra. Sin comas en ninguna parte. La barra no es un divisor: es un separador sintáctico que la especificación eligió para que el alfa quede visualmente aparte de las coordenadas del color, que es una cosa distinta.

oklab() toma las coordenadas cartesianas: claridad, eje verde-rojo y eje azul-amarillo. oklch() toma las polares: claridad, croma y ángulo de tono. Describen exactamente el mismo espacio y se convierten una en otra sin pérdida. Para escribir a mano querrás casi siempre oklch(), porque sus tres números corresponden a tres decisiones que sabes tomar. oklab() aparece sobre todo como espacio de interpolación, donde las coordenadas cartesianas evitan el problema de tener que decidir por qué lado se gira el tono.

Rangos y unidades de cada canal

Cada canal acepta un número o un porcentaje, y la equivalencia entre los dos no es la misma en todos.

El porcentaje del croma es la trampa clásica. oklch(60% 50% 264) no es “medio croma de lo que quepa”: es croma 0.2, un valor absoluto que en muchos tonos está fuera del gamut de sRGB. Escribe el croma como número decimal y te ahorras el problema entero.

El tono acepta cualquier unidad angular, y los valores fuera de 0-360 se normalizan dando vueltas. oklch(62% 0.18 624) es lo mismo que oklch(62% 0.18 264). Esto importa cuando calculas el ángulo con calc() y no quieres andar con módulos.

:root { --h: 264; }
.hermano-1 { color: oklch(62% 0.18 calc(var(--h) + 60)); }
.hermano-2 { color: oklch(62% 0.18 calc(var(--h) + 120)); }

Los valores fuera de rango en los otros canales se recortan al analizar: una L negativa vale 0, una L de 1.5 vale 1, un croma negativo vale 0. No se descarta la declaración.

La palabra clave none

Cualquiera de los cuatro canales acepta none. Significa que ese componente está ausente, que no es lo mismo que valer cero, aunque a la hora de pintar se comporte como cero.

.gris    { color: oklch(60% 0 none); }    /* el tono no significa nada aqui */
.apagado { color: oklch(60% none 264); }  /* croma ausente, tono declarado */

La diferencia aparece en la interpolación. Cuando dos colores se mezclan —en un degradado, en una transición, en color-mix()— la especificación primero los lleva a un espacio común, y ahí aplica una regla: si un componente está ausente en uno de los dos colores y presente en el otro, el ausente toma el valor del otro antes de interpolar. Es el mecanismo de carry forward.

Eso resuelve un problema muy concreto. Un gris no tiene tono; su tono es un número arbitrario que sale de la conversión. Si mezclas ese gris con un azul y el tono arbitrario resulta ser 90, la mezcla pasa por un verde que no habías pedido. Declarando el gris como oklch(60% 0 none) le dices al motor que ese ángulo no significa nada, con lo que la interpolación adopta el tono del azul y la mezcla es una desaturación limpia.

/* Un gris que se mezcla bien con cualquier cosa. */
:root { --neutro: oklch(60% 0 none); }

Fuera de la interpolación, none se comporta como cero, así que la declaración es segura en cualquier sitio.

Canales sueltos en custom properties

La sustitución de var() ocurre a nivel de tokens, antes de que nadie compruebe la gramática de la propiedad. Eso significa que puedes guardar partes de un color y componerlas después, y es la base de casi todos los sistemas de tokens modernos.

:root {
  --marca-h: 264;
  --marca-c: 0.18;

  --marca:        oklch(62% var(--marca-c) var(--marca-h));
  --marca-suave:  oklch(94% 0.028          var(--marca-h));
  --marca-fuerte: oklch(46% 0.175          var(--marca-h));
}

.aviso {
  /* Cambiar el tema entero es cambiar un numero. */
  --marca-h: 29;
}

El patrón tiene una virtud que no es evidente: cambia el tono de todo un subárbol con una sola declaración heredada, sin tocar ninguna de las reglas que consumen los tokens. Y tiene un límite que sí conviene conocer: los canales guardados así son texto sin tipo, con lo que no se pueden animar. El motor no sabe que --marca-h es un número, solo que es un flujo de tokens.

La solución es registrarlos:

@property --marca-h {
  syntax: "<number>";
  inherits: true;
  initial-value: 264;
}

.rotando {
  transition: --marca-h 400ms linear;
  &:hover { --marca-h: 324; }
}

Con el registro, el navegador interpola el número y el color se recalcula en cada fotograma. Sin él, el cambio es un salto seco.