Actualizado 10 de julio de 2026

La sintaxis CSS oklch() explicada

La función CSS oklch() especifica un color mediante tres valores separados por espacios — luminosidad, croma, tono — con un alpha opcional tras una barra: oklch(0.55 0.15 260) o oklch(0.55 0.15 260 / 40%). Es CSS nativo desde 2023 y funciona en todos los navegadores principales sin ningún paso de compilación. Esta es una referencia práctica de la sintaxis; lo que los valores significan de forma perceptual se cubre a lo largo de nuestra guía de OKLCH.

¿Cuáles son los tres valores y sus rangos?

color: oklch(L C H);
color: oklch(L C H / alpha);
  • L — Luminosidad. Un porcentaje (0%–100%) o un número (0–1); 62% y 0.62 son la misma luminosidad. 0 es negro, 1 es blanco.
  • C — Croma. Un número no negativo. En principio no tiene límite, en la práctica lo limita lo que las pantallas pueden mostrar: los colores sRGB llegan como máximo a 0.37, y los colores de UI cotidianos viven en su mayoría entre 0 (gris) y 0.25. No existe un «100 % de croma» con sentido: el máximo depende de la luminosidad y el tono.
  • H — Tono. Un ángulo en grados (0–360, unidad opcional): aproximadamente 30 es rojo anaranjado, 145 verde, 260 azul. El gris no tiene un tono con sentido: escribe cualquier número, o none.
  • alpha. Tras una /: un porcentaje o un número 0–1, igual que en cualquier otro sitio de CSS.

La gramática formal está en la referencia de MDN para oklch(); el resumen anterior cubre lo que necesita el estilizado del día a día.

¿Qué aspecto tiene un componente real en oklch()?

Un botón, escrito por completo en la sintaxis:

.button {
  background: oklch(0.55 0.15 260);          /* azul de luminosidad media  */
  color: oklch(0.98 0.01 260);               /* casi blanco, matiz de tono */
  border: 1px solid oklch(0.55 0.15 260 / 40%);  /* mismo azul al 40% alpha */
}

Dos detalles hacen un trabajo silencioso aquí. El color del texto lleva 0.01 de croma en el propio tono del botón: un casi blanco que pertenece al azul en lugar de un #fff estéril. Y el borde reutiliza el color de fondo con alpha en vez de un azul más claro elegido por separado, así que se mantiene en sintonía si el fondo cambia.

¿Cómo se deriva un color a partir de otro?

La forma de color relativo descompone un color existente en los canales l, c, h que puedes modificar:

:root {
  --brand: oklch(0.55 0.15 260);
}
.button:hover {
  background: oklch(from var(--brand) calc(l - 0.07) c h);  /* más oscuro  */
}
.badge {
  background: oklch(from var(--brand) 0.95 calc(c / 3) h);  /* tinte pálido */
}

Aquí es donde un modelo perceptual da sus frutos en CSS puro: «el hover es 0,07 más oscuro» se comporta igual tanto si el color de marca es azul, verde o naranja, porque los pasos iguales de L se ven iguales. La misma receta en hex requiere un valor elegido a mano por cada tono.

¿Qué aspecto tienen los valores OKLCH generados en una rampa real?

Leer los valores en bruto junto a colores reales es lo que construye la intuición más rápido. Abre una rampa con la L/C/H de cada paso visible en Scale Composer — la luminosidad baja paso a paso siguiendo una curva, el croma crece en los medios tonos y se atenúa en los extremos, el tono se mantiene fijo. Tres columnas de números, tres trabajos independientes.

Una rampa de color de diez pasos con los valores OKLCH de luminosidad, croma y tono de cada paso mostrados junto a las muestras

¿Qué pasa con los navegadores que no admiten oklch()?

La compatibilidad ha sido universal en los navegadores principales desde 2023, así que los fallbacks son una cuestión de tráfico heredado más que un requisito por defecto. Cuando necesites uno, la cascada de CSS hace el trabajo: declara primero el fallback:

.button {
  background: #4263c7;                /* se usa donde oklch() es desconocido */
  background: oklch(0.55 0.15 260);   /* gana en todos los demás casos       */
}

O condiciona bloques más grandes con @supports (color: oklch(0 0 0)). Los pipelines de tokens suelen esquivar la cuestión exportando hex junto a OKLCH, lo que mantiene a los consumidores de CSS heredado trabajando desde la misma paleta.

¿Dónde va la sintaxis más allá de hex?

Hex se detiene en sRGB; el modelo OKLCH no. Cambia la misma rampa al modo Display-P3 y los pasos llevan cadenas color(display-p3 …) junto a su hex recortado a sRGB: los medios tonos ganan un croma que la columna hex literalmente no puede expresar. Copia un par de valores del mismo paso y compáralos en tu propia hoja de estilos: ese hueco entre las dos cadenas es la parte de la gama de tu pantalla que el CSS de la era del hex nunca alcanzó.

Seguir leyendo