Chroma

Chroma es el eje del atributo del color que captura “cuánto color hay en el color” independientemente del brillo. Un rojo puro y un rosa puro pueden tener tonos y luminosidades similares pero chromas muy diferentes — el rosa está más cerca del gris, el rojo está más lejos del gris.

Chroma a veces se confunde con la saturación. La distinción:

• Chroma es la distancia absoluta desde el eje acromático (gris) a una luminosidad dada, medida en el espacio de color elegido (OKLab, CIELAB, etc.).
• Saturación es la relación entre chroma y luminosidad — una medida relativa.

Esto importa en diseño porque OKLCH (la función de color CSS moderna) usa chroma, no saturación. oklch(0,72 0,18 47) significa luminosidad 0,72, chroma 0,18, tono 47°. Ajustar solo chroma mantiene estables la luminosidad y el tono; con saturación, ajustar un valor también cambia el brillo percibido.

El chroma máximo alcanzable varía con el tono y la luminosidad. En sRGB, el amarillo a luminosidad media puede soportar más chroma que el azul a la misma luminosidad — los primarios amarillos están más cerca del límite de la gama sRGB. Los valores OKLCH que superan la gama sRGB se recortan al límite, a veces desplazando inesperadamente el color renderizado. Para un diseño perceptualmente consistente en un amplio rango de tonos, elige un valor de chroma (p. ej., 0,12-0,15) que sea alcanzable en cada tono que necesites.

Ejemplo práctico

Construye una paleta de 9 pasos de gris a rojo. En HSL podrías empezar en hsl(0 0% 50%) y terminar en hsl(0 100% 50%), escalando la saturación linealmente. Los pasos intermedios se ven bien en rojo, pero el mismo enfoque para el azul (hsl(240 0% 50%) → hsl(240 100% 50%)) produce un punto medio que parece notablemente más oscuro que el punto medio del rojo — la luminosidad HSL no es perceptualmente uniforme. En OKLCH, fijar la luminosidad en 0,65 y escalar el chroma de 0 a 0,18 produce nueve pasos que coinciden en brillo percibido entre tonos. Concretamente: oklch(0,65 0,00 0), oklch(0,65 0,0225 0), …, oklch(0,65 0,18 0) se sitúan todos en la misma línea de luminosidad percibida. Repite la misma rampa de chroma en el tono 240 (azul) y la escala de azul resultante correrá en paralelo visual a la escala de rojo paso a paso — imposible de lograr solo con HSL.

Numéricamente, los valores de chroma OKLCH para colores sRGB dentro de la gama caen aproximadamente en el rango de 0 a 0,37. El máximo depende del tono y la luminosidad: a L=0,6, el rojo más saturado alcanzable en sRGB tiene un chroma de alrededor de 0,25; el amarillo más saturado alrededor de 0,21; el azul más saturado alrededor de 0,31. Conocer estos límites evita especificar valores de paleta imposibles que el navegador recortará silenciosamente.

Cuándo y por qué importa

Chroma importa siempre que necesites colores que parezcan consistentes entre tonos — sistemas de diseño con escalas de color semánticas (rojo-50 hasta rojo-900, azul-50 hasta azul-900, etc.), visualizaciones de datos con paletas categóricas que deben ser igualmente legibles, y UI orientada a la accesibilidad donde las relaciones de contraste dependen de la luminosidad percibida (y no bruta). La paleta de Tailwind v4, Radix Colors y el sistema de diseño IBM Carbon publican rampas OKLCH controladas por chroma exactamente por esta razón. El error a evitar es tratar “saturación” como sinónimo de “intensidad”: aumentar la saturación en HSL arrastra la luminosidad consigo, mientras que aumentar el chroma en OKLCH no lo hace. Para la visualización de datos, la regla práctica es elegir el chroma máximo que sea alcanzable en cada tono que necesites (típicamente alrededor de 0,10-0,13 para sRGB dentro de la gama en todos los tonos), luego mantener el chroma fijo y variar la luminosidad para los pasos de la escala. Referencia: W3C CSS Color Module Level 4 — OKLab y OKLCH.

Por qué OKLab/OKLCH reemplazó a HSL para el trabajo de diseño serio: HSL es una transformación algebraica simple de RGB — su eje de “luminosidad” no es perceptualmente uniforme. Dos colores HSL con valores de luminosidad idénticos pueden verse muy diferentes en brillo real; un amarillo con luminosidad HSL del 50% parece mucho más brillante que un azul con el mismo valor. OKLab (Björn Ottosson, 2020) fue diseñado específicamente para que el eje L coincida con la percepción humana de la luminosidad y el eje chroma coincida con la saturación percibida. Pasos iguales en OKLab parecen pasos iguales al ojo. El CSS Color Module Level 4 añadió las funciones oklab() y oklch() por esta razón, y los sistemas de diseño (Tailwind 4, Radix Colors) publican cada vez más escalas de paleta generadas en OKLCH para una consistencia perceptual garantizada. Relacionados: cromaticidad, sRGB, gama. Referencia: Björn Ottosson — Un espacio de color perceptual para el procesamiento de imágenes (2020).