Nuevos modelos de color en CSS: OKLCH, OKLAB y HWB

La elección de colores en CSS ha superado las limitaciones tradicionales del RGB y las opciones básicas como blue o black. Ahora es posible lograr una precisión y realismo excepcionales mediante los modelos OKLCH, OKLAB y HWB. Con estos métodos, es factible obtener tonos específicos y auténticos adaptados perfectamente a distintos proyectos visuales.

¿Qué es OKLCH en CSS y cómo funciona?

El modelo OKLCH se basa en la precisión de tres parámetros principales:

• L (lightness): luminosidad del color.
• C (Chroma): intensidad y saturación del color.
• H (Hue): tonalidad representada en grados dentro de una rueda cromática.

Por ejemplo, utilizando herramientas externas como okLCH.com puedes seleccionar colores ajustando fácilmente estos tres parámetros para obtener tonos realistas y específicos que se adaptan a tus necesidades.

¿Cómo seleccionar colores con OKLAB en CSS?

El OKLAB funciona mediante:

• Luminosidad (L): definiendo qué tan claro u oscuro será el color.
• Parámetros cromáticos (A y B): ubican el color dentro de un eje cromático específico.

Para usarlo, sitios como Observable HQ ofrecen herramientas prácticas. Recuerda que al copiar los códigos desde plataformas externas, debes modificar manualmente los valores para asegurarte de que funcionen correctamente en CSS:

• Elimina las comas entre los parámetros.
• Convierte los valores de luminosidad a porcentaje, por ejemplo, de 0.67 a 67%.

¿En qué consiste el método HWB para elegir colores?

El método HWB, disponible directamente en Visual Studio Code, implica seleccionar colores a partir de:

• Hue: tono base elegido dentro de una rueda cromática.
• White: cantidad de blanco que mezclas con el tono base.
• Black: cantidad de negro añadido.

Ejemplificando, puedes definir un color con 50% blanco y 50% negro fácilmente usando Visual Studio Code u otros selectores online específicos para HWB.

Estas herramientas permiten una gama de elección más amplia y precisa respecto a los modelos tradicionales, ajustándose perfectamente a proyectos que requieren especificidad cromática, como estudios visuales detallados o diseños gráficos avanzados.

¿Cómo integrarías estos modelos avanzados de color en tus proyectos? ¡Comparte tus ideas en los comentarios!