Cómo crear hermosos gradientes CSS sin una "zona muerta gris"

• Al crear un gradiente lineal que va de amarillo a azul, aparece una "gray dead zone" en el medio

→ Esto ocurre porque el algoritmo de linear-gradient de CSS calcula el promedio matemático en RGB para determinar el valor de color de cada píxel

→ En el espacio de color RGB, si todos los valores RGB son iguales, el color siempre será una escala de grises

• Si se hace el promedio en HSL (Hue / Saturation / Lightness), no aparece esa zona muerta gris

• Pero si simplemente se crea el gradiente en HSL, se ve demasiado brillante y vívido porque "no considera la percepción humana"

→ Aunque tengan el mismo brillo, el amarillo se percibe como más brillante

• Por eso puede ser mejor usar modos como HCL, que modelan la visión humana

• El problema es que CSS todavía no ofrece una función para especificar modos de color como HSL/HCL

→ Como los gradientes de CSS no están limitados a solo dos colores, esto se puede resolver especificando muchos colores, 10 o más

• Con el Gradient Generator que se publica junto con esto, se pueden generar y usar gradientes CSS con modos de color como LRGB/HSL/HSV/HCL

[xguru]

El contenido relacionado con HSL está resumido en una publicación anterior.

• HSLuv - espacio de color amigable para desarrolladores https://es.news.hada.io/topic?id=1691