OKLCH vs LAB y LCH

OKLCH y LCH son el mismo tipo de espacio de color, con dos generaciones de diferencia: LCH es la forma polar de CIELAB (1976), OKLCH es la forma polar de OKLab (2020), y OKLab existe para corregir los defectos mejor documentados de CIELAB — sobre todo el desplazamiento de tono del azul, donde oscurecer un azul saturado a lo largo de un tono CIELAB constante lo desvía visiblemente hacia el morado. Para paletas y rampas de pantalla, las variantes OK son la opción por defecto más segura; LAB y LCH siguen siendo las herramientas adecuadas allí donde los flujos de trabajo de impresión y la tolerancia de diferencias de color ya dependen de ellas.

Ambas familias vienen de forma nativa en CSS, así que esta es una decisión real en cada hoja de estilos, no una lección de historia. Este artículo desenreda los cuatro nombres, muestra el defecto del azul con valores reales y traza la frontera entre los territorios de las dos familias — es la pieza comparativa de nuestra guía de OKLCH.

¿Cómo se relacionan LAB, LCH, OKLab y OKLCH entre sí?

Cuatro nombres, dos espacios de color:

Las formas rectangulares describen un color como luminosidad más dos ejes oponentes: a va de verde a rojo, b va de azul a amarillo. Las formas polares leen ese mismo punto como luminosidad, croma (distancia al gris) y tono (un ángulo). Convertir LAB a LCH, u OKLab a OKLCH, no cambia nada del color — es una posición expresada en dos estilos de coordenadas.

Así que la comparación real es CIELAB frente a OKLab. Rectangular frente a polar es ergonomía: los diseñadores razonan en términos de «mismo tono, un poco menos colorido», y por eso las formas polares son las que exponen las herramientas de diseño, y por eso este artículo dice LCH y OKLCH de aquí en adelante.

¿Qué hizo mal CIELAB con el azul?

CIELAB sirvió como el espacio de color perceptual estándar durante más de cuatro décadas, y gran parte de él aguanta bien. Su defecto mejor documentado se sitúa en torno al azul: las líneas de tono constante del modelo están curvadas ahí. Mantén fijo el número de tono de CIELAB mientras cambias la luminosidad, y los colores por los que pasas no se mantienen en un solo tono percibido.

Aquí está la operación donde se manifiesta. Parte del azul #2563eb, que se sitúa en oklch(0.546 0.215 262.9), y oscurécelo hasta formar una rampa manteniendo el tono OKLCH en ≈263: la luminosidad baja desde 0,546 pasando por 0,45 y 0,35 hacia 0,25, el croma sigue la gama, y cada paso se lee como el mismo azul, más oscuro — el extremo profundo aterriza cerca del azul marino (≈ oklch(0.27 0.19 264)), que es lo que el ojo espera de una versión oscura de este azul. Haz el oscurecimiento equivalente en LCH, manteniendo constante su ángulo de tono, y aparece el resultado clásico: la mitad inferior de la rampa adquiere un tinte morado visible. Lo que CIELAB llama «el mismo tono» en esta región no es lo que el ojo llama el mismo tono.

OKLab, publicado por Björn Ottosson en 2020, se ajustó frente a datos de apariencia de color más recientes específicamente para reparar distorsiones como esta. También predice la luminosidad de los colores fuertemente saturados de forma más fiable — útil cuando los acentos vivos y los tonos apagados necesitan leerse como coordinados en peso.

El defecto del azul se ganó su reputación porque oscurecer a tono constante no es una operación exótica — quizá sea lo más común que el trabajo de diseño le pide a un modelo de color. Estados hover, estados pulsados, superficies de modo oscuro, texto sobre fondos tintados: todos son «el mismo color, ajustado». Un modelo cuyo número de tono se curva en silencio bajo ese ajuste convierte cada rampa en una ronda de corrección manual.

Abre una rampa azul mantenida a tono OKLCH constante: diez pasos de casi blanco a casi negro, con el tono fijado en ≈263 durante todo el descenso. Los pasos profundos son los que hay que vigilar — esta es la región donde un tono CIELAB constante se habría vuelto morado.

¿Por qué CSS incluye ambas familias?

Porque ambas tienen su territorio. El CSS Color Module Level 4 define lab() y lch() junto a oklab() y oklch(), manteniendo ambas generaciones disponibles en paralelo en lugar de declarar un ganador.

La división sigue a los datos con los que trabajas. Si los valores que recibes provienen de un flujo de impresión o de medición de color — la especificación de color directo de una marca, un informe de tolerancia ΔE — lab() y lch() los expresan sin traducción. Si estás generando colores para pantallas — paletas, rampas, derivaciones de hover, planificación de contraste — las formas OK te dan la versión de «perceptual» que se comporta bien en las regiones que el trabajo de pantalla exige más.

¿Cuándo siguen siendo LAB y LCH la elección correcta?

Tres situaciones mantienen a CIELAB en el kit de herramientas:

• Producción de impresión. La gestión de color ICC usa CIELAB como espacio de conexión de perfiles, las bibliotecas de color directo publican valores de referencia LAB, y los flujos de pruebas de color se construyen en torno a ellos.
• Tolerancia de diferencias de color. Las fórmulas ΔE usadas para el control de calidad — incluida ΔE2000 — están definidas sobre CIELAB. Los instrumentos, los umbrales y décadas de tolerancias acumuladas lo hablan.
• Conjuntos de datos existentes. Los valores LAB medidos conservan su significado; convertir un archivo a OKLab añade un paso y no mejora nada de lo que a esos flujos de trabajo les importa.

Ninguna de estas es una debilidad que se esté tolerando. El defecto del azul importa cuando generas colores moviéndote a lo largo de los ejes del modelo — algo que los flujos de medición y de pruebas de color rara vez hacen, y que la generación de paletas de pantalla hace constantemente. Esa diferencia de uso, más que cualquier diferencia de antigüedad, es la verdadera frontera entre las dos familias.

¿Cómo distingues la deriva del modelo de un cambio de tono deliberado?

Ambos parecen «el tono se movió», así que ayuda ver una vez el tipo deliberado. La deriva llega sin invitación: cambiaste la luminosidad, y el tono se movió como efecto secundario. Una rotación deliberada se aplica a toda la paleta de una vez, a propósito, sin tocar la luminosidad.

Scale Composer lo expone como un control de desplazamiento de tono en cada paleta. Arrastra el desplazamiento de tono en la misma rampa azul — toda la escala oscila hacia el violeta o hacia el turquesa en un solo movimiento mientras cada paso conserva su luminosidad. Así es como se ve un cambio de tono intencionado; una vez que has hecho uno, el tipo no intencionado es fácil de nombrar cuando lo ves.