Como criar gradientes CSS bonitos sem a "zona morta cinza"

• Ao criar um gradiente linear que vai do amarelo ao azul, surge uma "gray dead zone" no meio

→ Isso acontece porque o algoritmo de linear-gradient do CSS calcula a média matemática em RGB para determinar o valor de cor dos pixels

→ No espaço de cores RGB, quando todos os valores RGB são iguais, a cor resultante é sempre em escala de cinza

• Se a média for calculada em HSL (Hue / Saturation / Lightness), essa zona morta cinza não aparece

• Mas, se o gradiente for feito simplesmente em HSL, ele parece claro e vívido demais, porque "não leva em conta a percepção humana"

→ Mesmo com o mesmo brilho, o amarelo parece mais claro

• Por isso, usar modos como HCL, que modelam a visão humana, pode ser uma opção melhor

• O problema é que o CSS ainda não oferece suporte para especificar modos de cor como HSL/HCL

→ Como gradientes CSS não ficam restritos a apenas duas cores, isso pode ser contornado definindo 10 ou mais cores intermediárias

• Com o Gradient Generator disponibilizado junto, é possível gerar e usar gradientes CSS com modos de cor como LRGB/HSL/HSV/HCL

[xguru]

O conteúdo relacionado a HSL foi organizado em um post que publiquei anteriormente.

• HSLuv - um espaço de cores amigável para desenvolvedores https://pt.news.hada.io/topic?id=1691