Si trabajas con CSS y solo conoces RGB o nombres como blue y red, te estás perdiendo modelos de color mucho más precisos y realistas. Las funciones OKLCH, OKLAB y HWB amplían tu paleta y te dan control fino sobre luminosidad, croma y matiz, algo clave si haces estudios de color o necesitas especificidad cromática en tu interfaz.

¿Qué es OKLCH y cómo seleccionar colores con este modelo?

OKLCH es un modelo que descompone el color en tres variables muy concretas, pensadas para reflejar mejor cómo percibimos los colores en la vida real.

Las siglas significan: L de luminosidad, C de croma y H de hue (matiz). El hue se distribuye en una rueda de 360 grados, mientras que la luminosidad y el croma se ajustan de forma independiente para afinar la intensidad y la pureza del color [0:55].

¿Por qué usar OKLCH en lugar de RGB? Porque ofrece colores más realistas y permite controlar luminosidad, croma y matiz por separado, algo que RGB no resuelve de forma intuitiva.

¿Cómo aplicar OKLCH en tu CSS?

Visual Studio Code todavía no incluye un color picker nativo para OKLCH, así que necesitas una herramienta externa. La más usada es oklch.com, donde seleccionas el color, copias el valor y lo pegas directamente en tu hoja de estilos [0:30].

Una vez pegado, el color se aplica como cualquier otro valor de CSS. La diferencia está en la calidad y precisión del tono que obtienes en pantalla.

¿Qué es OKLAB y en qué se diferencia de OKLCH?

OKLAB también parte de la luminosidad, pero los otros dos valores funcionan de manera distinta a OKLCH.

En este modelo tienes L de luminosidad, y A y B como valores dentro del eje cromático. En lugar de un matiz circular, A y B posicionan el color en coordenadas dentro de un plano de color [3:25].

Para seleccionar colores en OKLAB puedes usar ObservableHQ, que aparece como segundo resultado al buscar oklab color picker. Allí ajustas:

• Lightness o luminosidad general del color.
• Cantidad de divisiones de la rueda para mayor precisión.
• Rings para subdividir las proporciones.
• Hue para rotar la gama cromática.
• Background para verificar contraste sobre el fondo.

¿Cómo adaptar el valor de OKLAB para que funcione en CSS?

El valor que copias desde ObservableHQ no funciona tal cual en CSS. Hay que hacer dos ajustes manuales: eliminar las comas entre valores y convertir el primer número (que viene como factor decimal) a porcentaje [2:35].

Por ejemplo, si la herramienta entrega 0.67, debes escribirlo como 67% dentro de la función oklab(). Después de ese ajuste, el color se renderiza igual al que viste en el picker.

¿OKLAB es mejor que OKLCH? No es mejor ni peor, es distinto. OKLCH usa matiz circular en grados; OKLAB usa coordenadas A y B en un plano cromático. Elige según cómo prefieras pensar el color.

¿Cómo funciona HWB y por qué es el más fácil de integrar?

HWB es el modelo más amigable de los tres porque Visual Studio Code sí incluye un color picker nativo para él.

Las siglas significan hue, white y black. Eliges un grado del matiz dentro de la rueda y luego defines qué porcentaje de blanco y qué porcentaje de negro mezclar [4:20].

Por ejemplo, puedes definir un color con 50% de blanco y 50% de negro sobre un matiz determinado, y obtener un tono apagado controlado al detalle.

¿Cómo activar el picker de HWB en Visual Studio Code?

Una vez que escribes la función hwb() con un color, basta con pasar el cursor encima del valor para que Visual Studio Code despliegue el selector visual. Desde ahí ajustas matiz, blanco y negro sin salir del editor [5:05].

Si prefieres una herramienta externa, también existen HWB pickers online que cumplen la misma función.

¿Cuándo conviene usar cada modelo de color en CSS?

La elección depende del nivel de especificidad cromática que necesite tu proyecto.

• OKLCH: ideal para diseños donde quieres pensar el color en términos de luminosidad, intensidad y matiz por separado.
• OKLAB: útil si trabajas con coordenadas cromáticas o vienes de software de diseño que usa ese modelo.
• HWB: práctico cuando necesitas mezclar un matiz con blanco y negro de forma rápida, y quieres trabajar dentro de Visual Studio Code sin herramientas externas.

Estos modelos no reemplazan a RGB, lo complementan. Si tu proyecto exige paletas finas o estudios de color profesionales, vale la pena incorporarlos a tu flujo. ¿Cuál de los tres usarías primero en tu próximo proyecto? Cuéntalo en los comentarios.