OKLCH y el color CSS moderno: la guía práctica

OKLCH describe el color con tres valores perceptuales — Luminosidad, Croma, Tono — donde números iguales significan apariencia igual. Esa sola propiedad convierte el trabajo de paleta de corrección manual en cálculo: rampas uniformes, contraste predecible, temas oscuros derivados en vez de re-elegidos. Este hub reúne nuestras guías sobre el modelo de color y lo que cambia en la práctica; la versión de una sola imagen es una rampa con pasos genuinamente uniformes.

El problema que resuelve

Modelos más antiguos como HSL describen cómo se combinan los números RGB, no cómo se ven los colores. El resultado le resulta familiar a cualquiera que haya generado una paleta: pasos que se apiñan en el centro, tonos que se desvían, una columna de la paleta que pasa el contraste mientras su vecina falla con la “misma” luminosidad. Cuando la luminosidad significa lo que dice, esos problemas dejan de ser oficio y pasan a ser aritmética.

OKLCH vs HSL demuestra la mentira de la luminosidad con pares de colores concretos, y ¿Qué es la uniformidad perceptual? explica la propiedad de fondo: una distancia numérica igual significa una diferencia visible igual. Qué es un JND añade la medición que convierte “estos dos se ven iguales” en una afirmación comprobable.

Qué cambia en la práctica

Con un modelo perceptual debajo, una paleta se vuelve un conjunto de curvas en vez de un conjunto de elecciones: una curva de luminosidad coloca los pasos, un perfil de croma da forma a dónde alcanza su pico la saturación, y la misma maquinaria deriva temas oscuros y verifica el contraste. Rara vez escribes valores oklch() a mano — el modelo es el motor bajo la paleta, y los valores afloran en tokens generados y en CSS cuando necesitas razonar sobre un color.

Ese papel de motor es cómo lo usa Scale Composer: una escala impulsa color, tipografía y rejilla a la vez, y el lado del color se calcula en OKLCH para que las rampas salgan uniformes sin corrección por tono. La forma de trabajar basada en curvas tiene su propio hub — escalas de color trata las curvas de luminosidad y los perfiles de croma como decisiones de diseño por derecho propio — y el hub de modo oscuro cubre el lado de la derivación: un tema oscuro calculado ajustando luminosidad y croma en vez de invertir nada.

Gamas: la trampa honesta

No toda combinación de luminosidad-croma-tono existe en una pantalla. El croma tiene un techo que depende de la luminosidad y el tono, y las pantallas P3 de gama amplia lo elevan. Una buena generación de paletas respeta el techo con margen en vez de recortar contra él — varias guías más abajo cubren qué significa eso para los acentos de marca y las imágenes. sRGB vs Display-P3 mapea las dos gamas y dónde están hoy las pantallas de gama amplia, y Recorte de gama muestra qué pasa cuando un color generado supera el techo. El contraste es el otro límite duro que una paleta generada debe respetar; el hub de contraste cubre cómo verificarlo.

Por dónde empezar a leer

¿Qué es OKLCH? es la introducción desde cero — empieza ahí si los tres ejes son nuevos, y luego pasa a ¿Qué es el croma? por el único eje sin equivalente en el lenguaje cotidiano. Del lado de la implementación, La sintaxis CSS oklch() cubre cómo escribir los valores, Convertir hex a OKLCH cubre mover una paleta existente hacia dentro y hacia fuera, y Soporte de navegadores para oklch() zanja si puedes publicarlo sin paso de compilación (puedes, de forma nativa, en todos los navegadores principales). Dos guías aplican después el modelo a problemas que parecen no relacionados hasta que el modelo los expone: Por qué tus grises no son realmente neutros sobre el croma residual escondido en la mayoría de escalas de gris, y ¿Deberían las rampas de color desplazar el tono? sobre cuándo una deriva de tono es un error y cuándo es una decisión.

Guías de este hub

• ¿Deben las rampas de color cambiar de tono?

  El cambio de tono en las rampas de color, explicado: por qué las paletas ajustadas a mano rotaban el tono, por qué OKLCH hace que un tono constante parezca constante, y cuándo la rotación es una decisión deliberada.

• ¿Qué es el croma (y por qué no es la saturación)?

  El croma mide el colorido de forma absoluta; la saturación es un porcentaje de lo que cada tono permite. Por qué la diferencia importa para las paletas y los colores de acento.

• ¿Qué es la uniformidad perceptual?

  La uniformidad perceptual significa que distancias numéricas iguales se ven como diferencias visibles iguales. Por qué RGB y HSL no pasan la prueba, y qué aporta la uniformidad al trabajo de diseño.

• ¿Qué es OKLCH? Una explicación para diseñadores

  OKLCH describe el color con tres valores que coinciden con la percepción humana: luminosidad, croma, tono. Descubre por qué reemplazó a HSL para paletas, rampas y contraste.

• Compatibilidad de oklch() en navegadores en 2026

  Compatibilidad de OKLCH en navegadores en 2026: todos los motores principales incorporaron oklch() desde 2023. Quién sigue en la cola larga y los respaldos baratos que los cubren.

• Convertir de Hex a OKLCH (y de vuelta)

  Convertir de hex a OKLCH no tiene pérdida; el camino de vuelta puede recortar. Cómo funciona el pipeline, por qué existe la asimetría y una rampa trabajada a partir de un hex de marca real.

• Espacios de color explicados para diseñadores

  Espacios de color explicados para diseñadores: sRGB, P3 y Rec.2020 son gamas, OKLCH y HSL son sistemas de coordenadas — y qué combinación encaja con cada trabajo.

• La sintaxis CSS oklch() explicada

  Una referencia práctica de la sintaxis CSS oklch(): los tres valores y el alpha, ejemplos de botones resueltos, colores relativos con oklch(from …) y fallbacks.

• OKLCH en Tailwind v4

  OKLCH en Tailwind, en la práctica: la v4 reconstruyó su paleta en OKLCH y trasladó la configuración al CSS. Cómo definir colores de marca personalizados en @theme — y qué ganas con ello.

• OKLCH vs HSL: por qué HSL miente sobre la luminosidad

  OKLCH vs HSL: la luminosidad de HSL es una fracción de los números RGB, no una medida de la percepción — el amarillo y el azul al 50 % difieren enormemente. Qué corrige OKLCH y cómo.

• OKLCH vs LAB y LCH

  OKLCH vs LAB y LCH: qué comparten los espacios de color perceptuales de 1976 y 2020, cómo OKLab corrigió el desplazamiento de tono del azul de CIELAB y cuándo cada uno es la herramienta adecuada.

• Por qué tus grises no son realmente neutros

  Un gris neutro con canales RGB iguales suele verse frío junto a una paleta de marca. Por qué la percepción desplaza los grises y cómo un susurro de croma lo soluciona.

• Qué es una JND: cuándo dos colores se ven iguales

  La diferencia apenas perceptible que miden los científicos del color: el cambio más pequeño que un ojo puede detectar de forma fiable. Por qué los pasos de una paleta dentro de 0,02 de luminosidad OKLCH se fusionan.

• Recorte de gama: por qué se aplastan tus colores

  El recorte de gama aplasta los colores que existen en el modelo pero no en pantalla: por qué limitar cada canal desplaza el tono, por qué las rampas se aplanan y cómo el margen lo evita.

• sRGB vs Display-P3: lo que los diseñadores necesitan saber

  sRGB vs Display-P3: qué es una gama, dónde viven los colores adicionales de P3, por qué el hex no puede expresarlos y cuándo vale la pena la gama amplia en proyectos reales.

Empieza desde tu propio color

El modelo cobra más sentido con un color que te importe: suelta un color de marca en Scale Composer y sugerirá colores de apoyo derivados de él — luego observa cómo las rampas que construye mantienen sus pasos de luminosidad en todos los tonos. Ese comportamiento es OKLCH, visto en vez de explicado.