🧗🏽 🙅🏽 🌆 Colores CSS LCH 🚗 💰 🤛

Siempre me ha interesado la ciencia del color. En 2014, hablé en varias conferencias, hablando sobre la especificación CSS Color 4. Antes de eso, en 2009, escribí un programa para elegir colores. Ella utilizó un applet de Java oculto para admitir los perfiles de color ICC y para trabajar correctamente con CMYK. Fue, hasta donde yo sé, el primer programa de este tipo. Nunca lo lancé, pero condujo a la publicación de esta publicación. El interés por el color me trajo al hombre que se convirtió en mi esposo. En 2019, me convertí en el coeditor de la especificación CSS Color 5 . Mi objetivo es concretar mi propuesta.

modificación de color, que tiene como objetivo permitir a los diseñadores personalizar arbitrariamente los canales de color para crear opciones de color. También quiero combinar mi oferta con esta oferta. Los colores CSS LCH son algo que realmente me fascina. Estoy profundamente convencido de que los diseñadores, cuando aprendan más sobre los colores LCH, se sentirán indignados por el hecho de que todavía no tienen la oportunidad de usar dichos colores.

¿Qué es el LCH?

El módulo CSS Color 4 tiene, entre otras cosas, una definición de colores LCH . Hoy, todos los principales navegadores han comenzado a implementar su soporte, o están considerando seriamente esta posibilidad:

En Safari, LCH ya se está implementando.
Esta característica se espera en Chrome .
Se discute la posibilidad de implementar esta característica en Firefox .

LCH es un espacio de color que tiene algunas ventajas sobre los espacios de color RGB / HSL que todos están acostumbrados a trabajar con CSS. De hecho, iría aún más lejos y llamaría a LCH una tecnología que puede cambiar drásticamente la forma en que funcionan los colores en la web. Aquí hay tres hechos que me permiten hacer tales declaraciones.

▍1. LCH, en comparación con sRGB, da acceso a aproximadamente un 50% más de colores

Este es un gran paso adelante. En este momento, cualquier color CSS que podamos establecer está definido en el espacio de color sRGB . Hace unos años, esto era más que suficiente, ya que todos los monitores, excepto los profesionales, tenían una gama de colores menor que sRGB. Sin embargo, ahora todo ya no es así. Hoy, la gama de colores (es decir, la gama de colores que se pueden mostrar) de la mayoría de los monitores está cerca de P3 . Y el volumen de este espacio de color es 50% másque la cantidad de espacio sRGB. CSS actualmente no tiene absolutamente ningún acceso a estos colores. Permítanme repetir esto: no tenemos acceso a un tercio de los colores que pueden mostrar los monitores modernos. Y no se trata de algunos colores menores. Estamos hablando de los colores más vivos que pueden mostrar los monitores. Nuestros sitios se ven pálidos debido al hecho de que el hardware del monitor está evolucionando más rápido que las especificaciones CSS y las implementaciones del navegador.

Espacio de color sRGB y P3

▍2. LCH (y Lab) son espacios de color uniformes en percepción

Cuando se trabaja con LCH, el mismo cambio numérico en el espacio de color da la misma diferencia percibida entre los colores. Esta propiedad del espacio de color se llama "uniformidad perceptiva". Los espacios de color RGB o HSL no son uniformes en la percepción. Aquí hay un ejemplo muy revelador de esta característica ( aquí está la fuente de este ejemplo).

Heterogeneidad de la percepción de los colores HSL Los colores

en las filas superior e inferior difieren en tono en 20 grados. ¿Crees que la diferencia percibida entre estos colores es la misma?

▍3. El brillo en LCH es un indicador que significa algo

En el espacio de color HSL, la ligereza es un indicador sin sentido. Los colores pueden tener la misma claridad, pero varían mucho en su brillo percibido. Mi ejemplo favorito es una comparación de amarillo y azul. Puede que no me creas, pero los colores que se muestran a continuación tienen la misma ligereza HSL.

Los colores HSL tienen la misma luminosidad

Ambos colores tienen una luminosidad del 50%, pero ciertamente no tienen el mismo brillo percibido. ¿Cuál es el significado del concepto de "ligereza" en HSL?

Aquí puede entrar en una disputa conmigo, diciendo que la ligereza, al menos, tiene sentido con el mismo tono de color (matiz) y saturación de color. Es decir, al cambiar la ligereza dentro del mismo color. Y la verdad: al aumentar la ligereza HSL, obtenemos un color más claro y disminuimos, un color más oscuro. Pero lo que suceda no será necesariamente del mismo color.

Ajuste de la luminosidad con tono de color constante y saturación de color

Ambos colores tienen el mismo tono y la misma saturación, pero ¿se ven como una versión más oscura y clara del mismo color?

Cuando se usa el modelo de color LCH, los colores que tienen la misma luminosidad se perciben como colores que tienen el mismo brillo, y los colores con el mismo croma se perciben como colores de la misma saturación.

¿Cómo se organizan los colores LCH?

LCH es la abreviatura de Lightness, Chroma, Hue (ligereza, color, tono). Los componentes de color en este modelo de color tienen alguna relación con los componentes del modelo de color HSL. Pero existen serias diferencias entre los componentes de estos modelos de color.

Los ángulos de tono en el LCH no coinciden con los tonos HSL. Es decir, 0, esto no es completamente rojo. Este color es bastante más cercano al magenta. Y 180 no es un color turquesa, es más bien azul verdoso y es completamente complementario.

Colores con el mismo brillo percibido

Tenga en cuenta que estos colores, aunque son muy diferentes en tono, parecen colores que tienen el mismo brillo percibido.

En el espacio de color HSL, la saturación está representada por un rango ordenado de valores de 0-100. El hecho es que este espacio es el resultado de una simple transformación de RGB en coordenadas polares. En LCH, sin embargo, el valor del componente de croma es teóricamente ilimitado. El estándar LCH (como Lab) está diseñado para representar la gama completa de colores que perciben los humanos. No todos estos colores se pueden mostrar en el monitor, incluso uno que admita el espacio de color P3. Además, estamos hablando no solo del número máximo de colores mostrados, dependiendo de la gama de colores del monitor, sino también de la diferencia de colores.

Quizás esta idea sea más fácil de entender si la ilustra con un ejemplo. En aras de la simplicidad, imaginemos que tenemos un monitor cuya gama de colores coincide exactamente con el espacio de color sRGB. A modo de comparación, la pantalla 2013 MacBook Air podría generar aproximadamente un 60% de sRGB, pero la mayoría de las pantallas modernas pueden, como ya se mencionó, mostrar un 150% de sRGB. Para los valores L = 50 y H = 180 (muestra cian en la figura anterior), ¡el valor máximo de C es solo 35! Para L = 50 y H = 0 (Rosa), el valor de C puede alcanzar 77 sin ir más allá de sRGB. Para L = 50 y H = 320 (Púrpura), ¡el valor de C puede subir a 108!

Aunque la falta de límites se puede percibir como algo aterrador (ya sea sobre personas o espacios de color), no hay nada de qué preocuparse: si se configura un color que no se puede mostrar en un monitor determinado, se reducirá a un color similar admitido por el monitor. Al final, no hay nada nuevo: hasta que los monitores adquirieron una gama de colores superior a las capacidades de sRGB, esto fue exactamente lo que sucedió con los colores CSS habituales que se muestran en los monitores cuya gama de colores era inferior a sRGB.

Selector de color LCH

Espero que ahora también esté un poco interesado en la idea de usar colores LCH. Esto plantea la cuestión de cómo visualizar estos colores.

De hecho, hace bastante tiempo creé la herramienta correspondiente, LCH Color Picker, diseñada principalmente para ayudarme a mí y a mis colegas a comprender adecuadamente las características de LCH al editar CSS Color 5 . Una es conocer la teoría, y otra muy distinta es poder experimentar con los controles deslizantes y ver el resultado con sus propios ojos. Incluso compré un dominio, css.land , para publicar ejemplos relevantes allí. Usamos esta herramienta un poco, le agregué nuevas funciones, pero nunca escribí sobre ella. Por lo tanto, esta herramienta estaba disponible solo para nosotros y para aquellos que prestaron atención aEste repositorio de Github.

Medios para seleccionar colores LCH

Si está interesado en experimentar con colores LCH, puede utilizar esta herramienta. Aquí hay algunos detalles sobre él:

El código de conversión de color fue escrito por uno de los miembros de nuestro equipo. Estamos seguros de que los cálculos, al menos, se realizaron sobre la base de una comprensión correcta del proceso de conversión (es decir, si algo sale mal, esto es un error en el código y no el resultado de un malentendido de algo).
El componente de color Chroma admite un cambio en un rango que no sea 0 - 100, que distingue nuestra herramienta de algunas de las otras que pudimos encontrar.
Los usuarios pueden cargar colores CSS arbitrarios en él (usando el botón Importar).
Los controles deslizantes le permiten ingresar solo valores enteros, pero en los campos negros que aparecen sobre los controles deslizantes, puede ingresar cualquier número.
En el proceso, puede guardar colores y ver cómo se interpolan.
El análisis de color es compatible si pertenece al espacio de color sRGB, P3 (o a Rec.2020, incluso un espacio de color más extenso).
Configuración de transparencia compatible.
Y finalmente, ¡usar esta herramienta es simplemente interesante! Especialmente teniendo en cuenta que se implementa sobre la base de Mavo (aunque aquí se usa un poco de JavaScript, es decir, no es un proyecto Mavo creado en HTML puro).

De hecho, puede probar el LCH Color Picker aquí .

Preguntas y respuestas

Después de publicar este artículo, comenzaron a hacerme preguntas. Creo que debería aclarar aquí algunos conceptos erróneos comunes.

▍Usted dice que el soporte para los colores LCH en los navegadores aún no está implementado, pero puedo verlos en el artículo. ¿Cómo es esto posible?

Todos los colores utilizados en este artículo caen dentro de la gama de colores sRGB. Esto se debe a que hasta ahora no podemos generar colores fuera de sRGB. sRGB es un espacio de color, no una sintaxis de descripción de color. Por ejemplo, rgb(255 0 0)se lch(54.292% 106.839 40.853)establecen el mismo color.

▍ ¿Cómo muestra el selector de color LCH colores fuera de sRGB?

Mi programa, LCH Color Picker, no muestra dichos colores. Y, que yo sepa, en ningún lugar de Internet hay un programa que pueda mostrar esos colores. El proyecto LCH Color Picker se implementa utilizando tecnologías web, lo que significa que las restricciones estándar se aplican a cualquier otra página web. Convierto colores sin salida a sRGB. Al principio, simplemente traje los componentes de color RGB al rango de 0-100%, pero gracias a este PR , el programa ahora usa un algoritmo mucho más exitoso. Es decir, estamos hablando de reducir el valor del componente LCH C hasta que el color se encuentre dentro de los límites de sRGB. Es por eso que un aumento en el valor del componente C por encima de cierto límite no conduce a la conclusión de un color más brillante. El hecho es que dicho color aún no puede deducirse usando CSS.

▍ Noté que Firefox muestra colores más brillantes que Chrome y Safari. ¿Hay alguna conexión con el soporte de LCH?

Firefox no ha implementado esa parte de la especificación que restringe los colores CSS a marcos sRGB. En cambio, el navegador simplemente pasa valores RGB sin procesar a la pantalla. Por ejemplo, rgb(100% 0% 0%)este es el color rojo más brillante que puede mostrar un monitor. Aunque esto puede parecer una solución inteligente, aquí nos enfrentamos a contradicciones. El hecho es que con este enfoque, puede establecer colores, en el mejor de los casos, solo aproximadamente, ya que todas las pantallas muestran los colores de manera diferente. Al restringir los colores CSS a un espacio de color conocido (sRGB), obtenemos independencia del dispositivo. Los espacios de color LCH y Lab también son independientes del dispositivo, ya que se basan en el color medido real.

▍ ¿Qué puedes decir sobre el diseño de color (display-p3 rgb)? ¡Safari lo ha estado apoyando desde 2017!

Me informaron sobre esto después de publicar este artículo. Hace tiempo que sé que Safari está trabajando en esta función, pero de alguna manera me perdí el momento en que estaba lista. De hecho, el mes pasado se publicó este artículo que describe esta sintaxis en WebKit. Asombroso

El diseño color(colorspaceid params)es una característica descrita en CSS Color 4. Ella, en materia de gestión del color en CSS, se puede comparar con un cuchillo suizo. Lo mejor de este diseño es que le permite especificar el perfil de color ICC y los colores tomados de él. Por ejemplo, esto puede ser útil si desea utilizar colores CMYK reales o colores Pantone en una página web. Este diseño también admite algunos espacios de color predefinidos, uno de los cuales es display-p3. Por ejemplo, color(display-p3 0 1 0)nos da el color verde más claro en el espacio de color P3. Para probar el soporte para este diseño, puede usar esta prueba. En ausencia de soporte color(), se mostrará un color rojo y, si está disponible, un color verde claro.

Aunque esta es una característica sorprendente (y necesito rehacer mi LCH Color Picker para que el programa la use color()si esta característica es compatible), preste atención al hecho de que resuelve solo el primero de los problemas que he mencionado. Es decir, estamos hablando del acceso a todos los colores de la gama de colores. Pero, dado que la herramienta se color()basa en RGB, tiene todas las desventajas asociadas con RGB. No se distingue por una percepción uniforme, con su ayuda, al ajustar los parámetros de color, es difícil crear opciones de color (opciones más claras u oscuras, más o menos brillantes, etc.).

Además, observo que esta es una solución temporal. Ahora es aplicable debido al hecho de que las pantallas que pueden mostrar colores que no caben en P3 son raras. Pero después de otra mejora de las pantallas, resulta que el diseño color(display-p3 ...)tendrá los mismos problemas que ahora tienen los colores RGB.

Los espacios de color LCH y Lab son independientes del dispositivo, pueden representar todos los colores que son visibles para los humanos y, como resultado, seguirán siendo relevantes independientemente de la evolución del hardware.

¡Queridos lectores! ¿Estás interesado en usar colores LCH en CSS?

Colores CSS LCH