La función oklch() de CSS permite describir un color a partir de tres componentes: luminosidad (L), croma (C) y tono (H). Por ejemplo, el azul #007ab8 equivale a oklch(55.48% 0.131 241.70). La verdadera potencia llega con los colores relativos, una característica que, anteponiendo el operador from a un color en formato hexadecimal o cualquier otra función cromática, convierte ese color en sus valores L, C y H. A partir de ahí es posible sobrescribir manualmente cada componente e incluso aplicar cálculos con calc() para ajustar la luminosidad o el croma sin necesidad de conocer el valor original.
El autor aprovecha esta capacidad para generar una paleta completa de 11 tonos (del --color-05 al --color-95) a partir de un único código hexadecimal definido como variable CSS. En la primera iteración modifica solo la luminosidad en pasos que van del 18.5% al 96%, manteniendo el croma constante. El resultado, sin embargo, presenta saturaciones excesivas en los extremos claros y oscuros. Para corregirlo, aplica una fórmula basada en dividir el croma entre 0.2 y multiplicarlo por un coeficiente específico en cada paso, suavizando así los tonos más extremos.
Como mecanismo adicional, define una variable CSS --chroma con un valor de respaldo (c / .2) que puede sobrescribirse manualmente para aumentar o reducir la intensidad global de la paleta. Con un valor de 0.95 sobre el azul #007ab7, los tonos ganan viveza. El autor concluye que esta técnica demuestra que CSS es un lenguaje de programación capaz de realizar tareas que antes requerían JavaScript o código hecho a mano, y anuncia su próxima integración en el sistema de diseño Kelp UI.