{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

OKLCH: El futuro de la gestión del color

Crea paletas de colores coherentes, accesibles y predecibles usando el espacio de color que entiende la percepción humana.

¿Alguna vez has intentado crear una paleta de colores usando RGB o HEX y has notado que cambiar el tono hace que el color parezca más brillante o más apagado de forma inconsistente? Esto sucede porque esos formatos no son 'perceptualmente uniformes'.

OKLCH es un nuevo modelo de color en CSS que separa el color en tres dimensiones lógicas: Luminosidad (L), Croma (C) y Tono (H). Su gran ventaja es que, si mantienes la luminosidad (L) constante y cambias el tono, el ojo humano percibirá que ambos colores brillan con la misma intensidad.

En esta lección dominaremos cómo crear sistemas de diseño (Design Systems) más accesibles y vibrantes utilizando OKLCH y por qué deberías abandonar HSL.

  • Luminosidad, Croma y Hue.
  • La sintaxis es `oklch(L C H / alpha)`:
  • - **L (Lightness):** De 0% (negro) a 100% (blanco). A diferencia de HSL, el 50% de luminosidad en OKLCH siempre se percibe como la mitad de brillo real.
  • - **C (Chroma):** La pureza o intensidad del color. Suele ir de 0 a 0.4. Un valor de 0 es gris.
  • - **H (Hue):** El tono en un círculo de 360 grados (0 = rosa/rojo, 140 = verde, 250 = azul).

Entendiendo los ejes

Luminosidad, Croma y Hue.

La sintaxis es `oklch(L C H / alpha)`:

- **L (Lightness):** De 0% (negro) a 100% (blanco). A diferencia de HSL, el 50% de luminosidad en OKLCH siempre se percibe como la mitad de brillo real.

- **C (Chroma):** La pureza o intensidad del color. Suele ir de 0 a 0.4. Un valor de 0 es gris.

- **H (Hue):** El tono en un círculo de 360 grados (0 = rosa/rojo, 140 = verde, 250 = azul).

Colores más allá del SRGB

Acceso al gamut Display P3.

Los formatos antiguos como HEX están limitados al espacio de color sRGB. Las pantallas modernas (como las de los smartphones actuales) pueden mostrar muchos más colores.

OKLCH te da acceso directo a esos colores ultra-vibrantes (gamut P3) de forma segura. Si una pantalla no los soporta, el navegador realizará una conversión automática al color más cercano posible.

CSS
16

OKLCH: El futuro de la gestión del color

Crea paletas de colores coherentes, accesibles y predecibles usando el espacio de color que entiende la percepción humana.

Test de Desarrollo Web (CulTest)

Código del tema: display: grid; gap: 1rem;

📘 Teoría

Entendiendo los ejes

Luminosidad, Croma y Hue.

La sintaxis es `oklch(L C H / alpha)`:

- **L (Lightness):** De 0% (negro) a 100% (blanco). A diferencia de HSL, el 50% de luminosidad en OKLCH siempre se percibe como la mitad de brillo real.

- **C (Chroma):** La pureza o intensidad del color. Suele ir de 0 a 0.4. Un valor de 0 es gris.

- **H (Hue):** El tono en un círculo de 360 grados (0 = rosa/rojo, 140 = verde, 250 = azul).

Esta estructura permite crear variantes de un color (ej. un botón y su estado hover) simplemente ajustando un número de forma predecible.

Colores más allá del SRGB

Acceso al gamut Display P3.

1

Los formatos antiguos como HEX están limitados al espacio de color sRGB. Las pantallas modernas (como las de los smartphones actuales) pueden mostrar muchos más colores.

2

OKLCH te da acceso directo a esos colores ultra-vibrantes (gamut P3) de forma segura. Si una pantalla no los soporta, el navegador realizará una conversión automática al color más cercano posible.

🧪 Aprende probando

Ejemplo Generador de Paletas Coherentes Observa cómo al cambiar el tono (Hue), la sensación de brillo (Luminosidad) se mantiene idéntica, algo imposible de lograr con HSL.
⌄
Ejemplo Reto: Crea un estado Hover accesible Usa OKLCH para crear un botón azul y su estado hover. El hover debe ser exactamente un 10% más oscuro que el original, manteniendo el mismo tono y saturación.
⌄

🧰 Recursos

Enlaces útiles

OKLCH Color Picker & Converter Evil Martians - OKLCH in CSS MDN CSS MDN Layout Cookbook
Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS
Recursos del curso 78
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets
‹
Lección 15
Variables CSS (Custom Properties): tokens, temas y runtime
Lección 17
Degradados en CSS: diseño avanzado y generador práctico
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .