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 color de 0 a 360. La saturación es más obvia cuando el 0% tiene todo el color absorbido, 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.
Sigue habiendo problemas con el uso de HSL, que Brian Kardell explica en profundidad. Estoy lejos de ser un experto en color, pero creo que veo lo que Brian (y Adam) dicen en ese artículo. Digamos que tiene 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, especialmente cuando estás usando este formato de color. como parte de un sistema de colores.
La buena noticia es que hay características de color ya especificadas como módulo CSS de 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 de cómo lo 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 cercano está el valor de ligereza de LAB a los resultados de nuestra encuesta!
🎨 ¡los espacios de color no son todos iguales! https://t.co/AIEs0amdWY pic.twitter.com/xkEguq3KZG
– Adam Argyle (@argyleink) 3 de diciembre de 2019
Brian:
Hay espacios de color como Lab y LCH que se ocupan del espectro completo y tienen cualidades como la uniformidad de percepción. 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 hacer dichas matemáticas en los espacios de color Lab / LCH es la característica habilitadora ideal.
En el ticket de error de Chrome, Tab cree que sería casi trivial implementarlos.
Tenga en cuenta que lab () / lch () / gray () se pueden convertir con entusiasmo en nuestra infraestructura de color existente; no introducen conceptos fundamentalmente nuevos, solo son una mejor manera de especificar colores, más estrechamente asociados con cómo funcionan realmente nuestros ojos en lugar de estar estrechamente vinculados a 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 algunas exponenciales y un poco de multiplicación de matrices, y está bien documentado en la especificación.
Esto debería ser una especie de GoodFirstBug, creo.