¿Las mejores funciones de color en CSS?

He dicho antes que HSL es el mejor formato de color que tenemos. La mayoría de nosotros no somos como David DeSandro, que puede leer códigos hexadecimales . HSL(a) es Tono, Saturación, Luminosidad y alfa, si lo necesitamos.

hsl(120, 100%, 40%)

Hue no es intuitivo, pero no es tan extraño. Realiza un viaje alrededor de la rueda de colores de 0 a 360. La saturación es más obvia cuando el 0% elimina todo el color, como la escala de grises, y el 100% es un color completamente rico en ese tono. La luminosidad es “normal” al 50% y agrega blanco o negro a medida que avanza hacia el 100% y el 0%, respectivamente. Estoy seguro de que esa no es la forma científica o técnica correcta de explicarlo, pero esa es la lógica del cerebro.

Todavía existen problemas con el uso de HSL, que Brian Kardell explica en profundidad .Estoy lejos de ser un experto en colores, pero creo que veo lo que Brian (y Adam) dicen en ese artículo. Digamos que tienes tres colores diferentes y todos tienen exactamente la misma luminosidad en HSL. Eso no significa que todos tengan la misma ligereza. Eso es un poco extraño, particularmente cuando usas este formato de color como parte de un sistema de colores .

La buena noticia es que ya hay características de color especificadas como módulo CSS Nivel 4 que ayudan con esto: Lab y LCH. Vea el ejemplo de Adam donde los colores en Lab tienen valores que reflejan su luminosidad real con mucha más precisión que cómo la percibimos.

HSL vs LAB:: ligereza

Los mismos colores de nuestra complicada encuesta de colores, pero esta vez he mostrado la versión de LAB del mismo color en la parte superior. ¡Observe cuánto más cerca está el valor de luminosidad de LAB de los resultados de nuestra encuesta!

¡Los espacios de color no son todos iguales! https://t.co/AIE0amdWY pic.twitter.com/xkEguq3KZG

– Adam Argyle (@argyleink) 3 de diciembre de 2019

Brian:

Hay espacios de color como Lab y LCH que abarcan todo el espectro y tienen cualidades como la uniformidad perceptiva. Por lo tanto, si queremos excelentes funciones de color para usar en sistemas de diseño reales, todos parecen estar de acuerdo en que tener soporte para realizar dichos cálculos en los espacios de color Lab/LCH es la característica habilitadora ideal.

En el ticket de error para Chrome , Tab cree que implementarlos sería casi trivial.

Tenga en cuenta que lab()/lch()/gray() se pueden convertir fácilmente en nuestra infraestructura de color existente; no introducen ningún concepto fundamentalmente nuevo, son simplemente una mejor manera de especificar colores, más estrechamente asociados con cómo funcionan realmente nuestros ojos en lugar de estar estrechamente vinculados con cómo funcionan los píxeles rgb.

Las funciones de conversión para convertirlo en rgb son un poco de código, pero son solo algunos exponenciales y un poco de multiplicación de matrices, y está bien documentado en la especificación.

Creo que esto debería ser algo así como GoodFirstBug.