Compatibilidad de oklch() en navegadores en 2026

oklch() funciona en todos los motores de navegador principales, y lo hace desde 2023: Chrome y Edge lo incorporaron en la versión 111 (marzo de 2023), Firefox en la 113 (mayo de 2023) y Safari aún antes, en la 15.4 (marzo de 2022). Para los navegadores evergreen en 2026, el soporte es prácticamente universal. La verdadera pregunta ha pasado de ¿puedo usarlo? a ¿y la cola larga? — la población cada vez menor de WebViews embebidos y navegadores corporativos fijados que nunca se actualizan.

Esta es la página de estado de nuestra guía de OKLCH: los datos de versiones, quién sigue quedándose fuera y las estrategias de respaldo ordenadas de la más barata en adelante. Los datos de soporte caducan por naturaleza, y por eso esta página lleva su fecha de actualización como parte de la respuesta.

¿Qué versiones de navegador añadieron oklch()?

Safari se adelantó un año — WebKit incorporó pronto las funciones de CSS Color Level 4 — y las versiones de Chromium y Firefox llegaron con pocas semanas de diferencia en la primavera de 2023, cuando las funciones de color eran un área de enfoque de Interop. Para las cifras actuales en cualquier momento, la tabla de soporte en vivo de Can I Use registra versiones y cuota de uso global; a estas alturas, varios años de versiones de navegadores que se actualizan solos separan a los usuarios de hoy de los últimos motores que no lo tenían.

¿Quién sigue sin poder renderizar oklch()?

No los navegadores de escritorio o móviles que se actualizan solos — esa población pasó página hace años. Los huecos que quedan se concentran en lugares donde un motor queda congelado:

• WebViews embebidos antiguos — apps y dispositivos que empaquetan un motor de navegador y dejaron de actualizarlo: navegadores de smart-TV envejecidos, shells de quiosco, navegadores dentro de apps en dispositivos que ya no reciben actualizaciones del sistema operativo.
• Flotas corporativas fijadas en navegadores antiguos — entornos bloqueados donde el departamento de IT congeló la versión del navegador hace años y valida las actualizaciones con lentitud.

Si esto importa o no es una cuestión de audiencia, no de tecnología. Un sitio de consumo verá estos entornos como un error de redondeo; una intranet para una flota congelada en 2021 los verá como toda su audiencia. Si quieres que la decisión sea cuestión de datos y no de doctrina, tus propias analíticas la resuelven: la proporción de sesiones en motores anteriores a 2023 es un número que puedes leer en un informe de navegadores, y para la mayoría de sitios públicos ha caído por debajo del umbral de ruido. Para la mayoría de proyectos en 2026, entonces, el respaldo es un seguro barato más que un requisito — vale la pena añadirlo porque casi no cuesta nada, no porque el riesgo sea grande.

¿Qué ganas al escribir oklch(), para empezar?

La versión corta del argumento: el valor de luminosidad de OKLCH refleja lo brillante que se ve realmente un color, así que las paletas pueden generarse — los pasos colocados sobre una curva de luminosidad se ven espaciados de forma uniforme, y el contraste entre roles pasa a ser una propiedad de la escala en lugar de una prueba par por par. El hex puede entregar esos resultados, pero no puede expresar el razonamiento; oklch() mantiene la lógica legible en la hoja de estilos.

La ganancia se ve más fácilmente en una paleta generada: abre una escala construida de forma nativa en OKLCH en Scale Composer — pasos sobre una curva de luminosidad, cada uno con el valor oklch() que un navegador moderno lee directamente.

¿Cuál es la mejor estrategia de respaldo?

Ordenadas de la más barata a la más estructural:

1. Declaraciones ordenadas. La cascada hace todo el trabajo:

.button {
  background: #2563eb;                  /* lo leen todos los navegadores */
  background: oklch(0.546 0.215 262.9); /* gana donde hay soporte        */
}

Un navegador que no reconoce oklch() descarta la segunda declaración por inválida y se queda con el hex; uno que sí lo reconoce deja que gane la declaración posterior. Sin herramientas, sin coste en tiempo de ejecución, funciona por propiedad. (Los dos valores de arriba son el mismo azul — el hex es simplemente su forma escrita en sRGB.)

2. Bloques @supports. Cuando toda una sección del diseño depende de color de gama amplia — una capa de acento en P3, por ejemplo — una consulta de característica mantiene la lógica en un solo lugar en vez de emparejar cada declaración:

@supports (color: oklch(0.5 0.1 200)) {
  /* aquí viven los acentos de gama amplia */
}

Vale la pena para secciones grandes; excesivo para colores individuales.

3. Resuélvelo en el pipeline de tokens. Escribir los pares a mano no escala más allá de un puñado de colores. La respuesta estructural es generar ambas formas escritas desde la misma fuente de paleta: las exportaciones de Scale Composer — DTCG, CSS, Tailwind v4, Figma Variables — siempre llevan el hex junto a los valores OKLCH, de modo que un consumidor heredado lee la misma paleta a través de su forma en sRGB mientras que los motores modernos obtienen el color a plena precisión.

¿Cómo lo publicas hoy?

Trata OKLCH como la fuente de verdad y deja que la capa de exportación produzca la red de seguridad: los navegadores modernos leen oklch(), todo lo demás lee el gemelo en hex, y nadie mantiene dos paletas. Abre la vista de respaldo en hex de la misma escala — cada paso emparejado con su hex en sRGB, exactamente el par que quiere el patrón de declaraciones ordenadas — y la cola larga queda cubierta antes incluso de pedirlo.