Color OKLCH en el CSS moderno: por qué gana y cómo llevarlo a producción
Una guía práctica del color OKLCH en CSS. Por qué el hex se rompió a escala, cómo OKLCH arregla la deriva de luminosidad, la migración en cuatro pasos y la rampa de paleta perceptualmente uniforme que todo sistema de diseño debería lanzar en 2026.
Color OKLCH en el CSS moderno: por qué gana y cómo llevarlo a producción
OKLCH es el primer espacio de color que CSS ha lanzado y sobre el que los diseñadores pueden razonar de verdad. Los equipos que siguen construyendo paletas en hex pierden en silencio todas las discusiones de contraste y modo oscuro que ni sabían que estaban teniendo.
El hex nunca fue un espacio de color, fue una serialización
Hex es una abreviatura de sRGB. #4A90E2 no es una especificación de color, es una tripleta de valores de canal rojo, verde y azul comprimida en seis caracteres. sRGB se diseñó para monitores CRT a principios de los años 90, no para la percepción visual humana.
La consecuencia es que dos valores hex pueden ocupar la misma posición numérica de "brillo" en tu paleta y verse completamente distintos a tus ojos. El blue-500 en la mayoría de los sistemas de diseño se ve más oscuro que el yellow-500, incluso cuando ambos comparten la misma posición relativa en la rampa. Eso no es un problema de gusto. Es un problema matemático incrustado en el sistema de coordenadas.
"El hex nunca fue un espacio de color, fue una serialización, y desde entonces discutimos sobre la luminosidad."
HSL fingió arreglarlo y no lo hizo
Llegó HSL y dio a los diseñadores un lenguaje: tono, saturación, luminosidad. Parecía un sistema. No lo era. El canal de luminosidad en HSL sigue mapeándose a valores sRGB por debajo, lo que significa que HSL hereda los mismos problemas perceptuales que el hex.
hsl(220, 70%, 50%) y hsl(45, 70%, 50%) tienen nominalmente la misma luminosidad. Ábrelos lado a lado. El amarillo se lee como bastante más claro. HSL te dio mejores palabras para la misma matemática rota.
OKLCH es perceptualmente uniforme
OKLCH se basa en el espacio de color OKLab, desarrollado por Björn Ottosson en 2020 específicamente para resolver la no uniformidad perceptual de los espacios anteriores. La L de OKLCH significa luminosidad percibida, calibrada según cómo responde realmente el sistema visual humano a la luz.
Valores de L iguales en OKLCH significan brillo percibido igual. No aproximadamente igual. No "normalmente igual si el croma es parecido". Igual. Esa es la propiedad que ningún espacio de color previo en CSS podía ofrecer, y cambia por completo cómo razonas sobre la generación de paletas.
Las tres razones por las que OKLCH gana
Luminosidad perceptualmente uniforme, interpolación de tono predecible y soporte de gamut amplio. Cada una corrige un bug concreto de tu paleta actual, y juntas componen un flujo de color que escala entre temas, componentes y tipos de pantalla.
Razón uno: la deriva de luminosidad está muerta
En sistemas hex y HSL, la deriva de luminosidad es el impuesto invisible que pagas en cada paleta. Ajustas blue-50 y amber-50 a lo que se ve bien a ojo, divergen en pantallas distintas, pelean entre sí en modo oscuro, y la matemática del contraste nunca termina de cuadrar.
En OKLCH, blue-50 y amber-50 tienen el mismo número de luminosidad, y ese número representa el mismo brillo percibido. Tailwind v4 migró toda su paleta a OKLCH precisamente por esto. Si usas las escalas de color de Radix UI, ya te beneficias de la uniformidad perceptual aunque nunca hayas visto la palabra OKLCH en la documentación.
Razón dos: la interpolación de tono es sensata
Los degradados en CSS con interpolación sRGB viajan por el cubo de color RGB, no por el espacio perceptual. Un degradado de azul a amarillo en sRGB pasa por un medio gris barroso porque la diagonal RGB cruza cerca del eje acromático. No es artístico. Es un accidente de geometría.
La interpolación de degradados en OKLCH recorre el ángulo de tono a lo largo del anillo perceptual. Del azul al amarillo en OKLCH pasa por cian y verde, que es lo que tu ojo espera. El barro gris desaparece. Esto importa para degradados de UI, transiciones de color animadas y cualquier herramienta de generación de paletas que produzca pasos intermedios.
Razón tres: P3 y Rec2020 están al alcance
El hex no puede describir colores fuera de sRGB. Todo iPhone desde 2016, todo portátil moderno con panel de gamut amplio y la mayoría de los monitores de consumo nuevos pueden mostrar colores que existen en el gamut P3 pero no tienen dirección hex. Has estado dejando color saturado y vivo sobre la mesa porque tu sistema de coordenadas no podía nombrarlo.
OKLCH puede describir colores P3 y Rec2020 de forma nativa. oklch(0.60 0.28 260) es un azul vivo que existe en P3 pero queda fuera del gamut sRGB. Los navegadores modernos saben qué hacer con él, y la guía de color Display P3 de Apple lleva años apuntando en esa dirección. El sistema de diseño que se mueva a OKLCH ahora también estará listo cuando P3 sea la expectativa por defecto.
La migración en cuatro pasos de hex a OKLCH
Auditar, convertir, regenerar, volver a auditar. La migración es mecánica para los tokens primitivos y requiere criterio para los tokens semánticos. Una migración completa de un sistema de diseño mediano toma días, no semanas. Anclar los nuevos tokens en una arquitectura limpia de variables de Figma antes de empezar es lo que más tiempo ahorra.
Paso uno: auditar la paleta existente
Exporta todos los tokens de color de tu sistema. Convierte cada valor hex a OKLCH con una herramienta como oklch.com o el plugin OKLCH de PostCSS. Ordena por valor de L y mira la columna de luminosidad a través de los tonos.
Los bugs se anuncian solos. Blue-300 estará en L=0.72 mientras yellow-300 está en L=0.87. Tokens que debían tener el mismo peso visual no se acercan ni de lejos. Esta auditoría es la evidencia que hace fácil justificar la migración ante cualquiera que se oponga.
Paso dos: convertir los primitivos a OKLCH
Toma la escala primitiva, la rampa numerada en bruto y no los tokens semánticos, y conviértela a OKLCH. Redondea los valores de luminosidad a pasos consistentes en las once paradas: 0.97, 0.93, 0.86, 0.75, 0.65, 0.54, 0.45, 0.37, 0.27, 0.19, 0.13.
No intentes preservar exactamente los valores hex originales. El objetivo es arreglar la inconsistencia. Un blue-500 convertido y un red-500 convertido no serán idénticos píxel a píxel a los valores antiguos, y ese es todo el objetivo. El sistema mejora, no solo cambia.
Paso tres: regenerar las rampas
Con pasos de luminosidad limpios y consistentes, regenerar rampas entre tonos se vuelve una operación de tabla. Fija la columna L, elige el croma de cada tono (los azules suelen soportar más croma que los marrones y amarillos antes de recortarse), ajusta la columna H y genera.
El resultado es que blue-500 y red-500 se sienten por primera vez con el mismo peso visual en tu sistema. Las decisiones de paleta de color de marca que antes eran juicios arbitrarios pasan a ser elecciones con fundamento y una coordenada a la que señalar.
Paso cuatro: volver a auditar la accesibilidad
Paleta nueva, nueva pasada de contraste. OKLCH facilita predecir el contraste porque la luminosidad ahora significa lo que dice. Emparejar dos tokens con valores L conocidos te da una buena intuición previa de su ratio de contraste antes de abrir el verificador.
Ejecuta comprobaciones de contraste WCAG y APCA en todos los emparejamientos de tokens semánticos. Marca los pares que ya no cumplan y ajusta el croma o la luminosidad del token que falle. Una pasada adecuada de contraste de color accesible sobre una paleta OKLCH suele destapar menos sorpresas que la equivalente sobre una paleta hex, porque los pasos de luminosidad antes estaban mal y ahora no.
¿Quieres un sistema de color que aguante entre modos, tonos y pantallas modernas sin deriva de luminosidad? Brainy diseña sistemas de paletas nativos en OKLCH que se entregan como variables de Figma, propiedades personalizadas de CSS y tokens de Tailwind, con la pasada de contraste ya hecha.
Las cuatro trampas de OKLCH
Recorte de gamut fuera de rango, recorte de croma, manejo del alfa y huecos en las herramientas. Cada una muerde a los equipos nuevos en OKLCH, y cada una tiene una solución concreta que se aplica en minutos una vez sabes qué buscar.
| Trampa | Qué pasa | Solución |
|---|---|---|
| Recorte fuera de gamut | Los valores de alto croma caen fuera de sRGB y el navegador los recorta, a veces desplazando el tono | Protege los colores solo P3 con @media (color-gamut: p3) |
| Recorte de croma | El recorte cambia ligeramente el tono, no solo la saturación | Mantén el croma seguro para sRGB por debajo de ~0.20 para una compatibilidad amplia |
| Manejo del alfa | oklch(0.55 0.20 260 / 0.5) funciona en rellenos estáticos; algunas rutas de interpolación en navegadores antiguos fallan | Prueba el alfa en degradados y transiciones, no solo en colores estáticos |
| Huecos en las herramientas | El selector de color nativo de Figma no expone OKLCH directamente | Usa Tokens Studio o define los tokens en CSS y referéncialos mediante el panel de código de Figma |
El tema del gamut es el que más muerde. Cuando escribes oklch(0.60 0.32 260), ese valor de croma queda fuera de sRGB. Los navegadores de escritorio lo manejan recortando al color sRGB más cercano, lo que puede desplazar el tono aparente. La solución es mantenerte en un croma seguro para sRGB en los tokens base o proteger los valores de gamut amplio tras una media query y dejar una declaración de respaldo encima.
La rampa de paleta OKLCH que funciona
Una rampa práctica de 11 pasos con pasos de luminosidad consistentes, usando azul en el tono 260 como referencia. Los pasos de luminosidad son idénticos en todos los tonos de tu sistema. Solo cambian el croma y el tono por familia de color.
:root {
--blue-50: oklch(0.97 0.02 260);
--blue-100: oklch(0.93 0.05 260);
--blue-200: oklch(0.86 0.09 260);
--blue-300: oklch(0.75 0.14 260);
--blue-400: oklch(0.65 0.18 260);
--blue-500: oklch(0.54 0.22 260);
--blue-600: oklch(0.45 0.20 260);
--blue-700: oklch(0.37 0.17 260);
--blue-800: oklch(0.27 0.13 260);
--blue-900: oklch(0.19 0.09 260);
--blue-950: oklch(0.13 0.06 260);
}
Para generar rojo (tono 25), ámbar (tono 75) o verde (tono 145), mantén la columna L idéntica en las once paradas. Ajusta C según la capacidad natural de croma del tono: amarillos y verdes soportan menos croma que los azules antes de salirse de sRGB. Ajusta H a tu tono objetivo. Ese es todo el sistema de paleta.
El sistema de color para modo oscuro construido sobre esta rampa usa tokens semánticos que alternan entre primitivos por paso de L y tono, no sobrescribiendo valores hex a mano uno por uno.
Soporte de navegadores y la ventana segura de migración
OKLCH está soportado en todos los navegadores principales lanzados desde 2023. Chrome 111, Safari 15.4, Firefox 113 y Edge 111 incluyen soporte completo de OKLCH. La cobertura global supera el 93% a mediados de 2025. La ventana de migración está abierta.
| Navegador | Soporte OKLCH | Desde |
|---|---|---|
| Chrome | Completo | 111 (mar 2023) |
| Safari | Completo | 15.4 (mar 2022) |
| Firefox | Completo | 113 (may 2023) |
| Edge | Completo | 111 (mar 2023) |
| Samsung Internet | Completo | 21 (2023) |
El respaldo para cualquier navegador que no soporte OKLCH es una sola línea. Declara primero el hex de respaldo y luego el valor OKLCH. Los navegadores que no entienden OKLCH lo ignoran y usan el hex. Los que sí, usan el mejor valor.
color: #4a7de8; /* sRGB fallback */
color: oklch(0.54 0.22 260); /* OKLCH for modern browsers */
Tailwind v4 genera su paleta en OKLCH de forma nativa. Linear, los design tokens Sail de Stripe y la guía de color para desarrolladores de Apple se han movido hacia sistemas perceptualmente uniformes. La industria ya aterrizó. La pregunta es cuándo se une tu equipo.
FAQ
¿Es difícil aprender OKLCH?
El sistema de coordenadas es distinto del hex o HSL, pero no es complejo. L es la luminosidad de 0 a 1. C es el croma, más o menos qué tan saturado. H es el tono en grados. Una vez interiorizas que L significa brillo percibido y C significa colorido, el sistema se vuelve intuitivo más rápido de lo que lo hizo HSL.
¿Puedo usar OKLCH en Figma hoy?
Figma no expone OKLCH de forma nativa en su selector de color a 2025. El flujo práctico es definir los tokens en OKLCH en un archivo de tokens mediante Tokens Studio o un archivo de variables CSS sincronizado con las variables de Figma, y luego usar la exportación de código de Figma para verificar los valores. El motor de renderizado de Figma gestiona la conversión internamente.
¿OKLCH rompe mis valores hex existentes?
No. Puedes introducir OKLCH de forma incremental, token por token. Tus valores hex existentes siguen funcionando exactamente como antes. La migración es aditiva, no un reemplazo.
¿Cuál es la diferencia entre LCH y OKLCH?
LCH se basa en el espacio de color CIELAB, que es perceptualmente uniforme pero tiene problemas de linealidad de tono, en particular en el rango azul-violeta. OKLCH se basa en OKLab, que corrige esos desplazamientos de tono. Para el trabajo de diseño práctico, OKLCH es la mejor opción porque su interpolación de tono produce menos sorpresas.
¿Cómo convierto hex a OKLCH?
Usa oklch.com, el plugin oklch de PostCSS o el playground de la especificación CSS Color 4. Pega tu valor hex, lee las coordenadas OKLCH, redondea L y C a dos decimales y redondea H al grado entero más cercano. Ese es el valor de tu token.
¿OKLCH afecta a los requisitos de accesibilidad?
Los requisitos de contraste de WCAG se definen sobre la luminancia relativa de sRGB, no sobre la luminosidad OKLCH. APCA está más alineado con los modelos perceptuales y se mapea de forma más natural a los valores L de OKLCH. En la práctica, OKLCH hace la predicción del contraste más intuitiva porque L sigue el brillo percibido, pero aun así debes pasar los pares de tokens semánticos por un verificador de contraste. El proceso es el mismo, solo que más fácil de razonar de antemano.
El cambio que OKLCH realmente desbloquea
OKLCH no es una moda. Es la primera vez que CSS lanza un espacio de color diseñado en torno a cómo perciben el color los ojos humanos, y las herramientas ya han madurado lo suficiente como para que la migración sea práctica hoy para cualquier equipo dispuesto a dedicarle unos días enfocados.
Los equipos que se mueven ahora obtienen tres cosas a la vez: una paleta que aguanta en modo oscuro sin sobrescrituras manuales, un comportamiento de contraste que coincide con el sistema de coordenadas y una base que se extiende a P3 sin una reescritura futura. Los equipos que esperan seguirán teniendo la misma discusión sobre por qué blue-300 se ve más pesado que orange-300, y la respuesta seguirá siendo la misma. El sistema de coordenadas nunca se diseñó para ese trabajo.
Si quieres construir la arquitectura completa de tokens sobre esta paleta, el paper de arquitectura de variables de Figma cubre la capa semántica. Para la aplicación de este trabajo al modo oscuro, sistemas de color para modo oscuro retoma donde este termina.
¿Quieres que te lo construyan? Contrata a Brainy.
Want a color system that holds up across modes, hues, and modern displays without lightness drift? Brainy designs OKLCH-native palette systems that ship as Figma variables, CSS custom properties, and Tailwind tokens with the contrast pass already done.
Get Started
