1. Por Que Ir Alem do RGB
O modelo RGB especifica cores pela quantidade de vermelho, verde e azul — o que e ideal para a maquina, mas pouco intuitivo para humanos. E dificil "ver" mentalmente a cor de um valor como rgb(59, 130, 246). Modelos como HSL e HWB foram criados exatamente para tornar as cores mais previsıveis e manipulaveis por pessoas.
2. O Modelo HSL
HSL define cores por tres parametros: Hue (matiz, 0-360 graus no circulo cromatico), Saturation (saturacao, 0-100%) e Lightness (luminosidade, 0-100%). Luminosidade 0% e sempre preto, 100% e sempre branco, e 50% representa a cor mais pura.
Uma vantagem enorme no design: para criar variacoes de uma cor, basta ajustar a luminosidade mantendo H e S fixos. Isso garante que todas as variacoes sejam "da mesma familia".
3. O Modelo HWB
HWB (Hue, Whiteness, Blackness) e uma alternativa ao HSL que muitos designers consideram mais intuitiva. Em vez de saturacao e luminosidade, voce define quanto de branco (W) e quanto de preto (B) e misturado ao matiz puro. Quando W + B = 100%, o resultado e um cinza puro, independente do matiz.
"HWB foi projetado para ser o modelo de cor mais intuitivo para seres humanos — mais proximo de como artistas pensam ao misturar tintas."
4. Usando HSL e HWB no CSS
Ambos os modelos sao suportados nativamente em CSS. Exemplos de uso:
color: hsl(210, 83%, 60%);— azul mediocolor: hsl(210deg 83% 60% / 0.8);— com opacidade (sintaxe moderna)color: hwb(210 10% 10%);— equivalente em HWBbackground: hsl(var(--hue) 70% 50%);— com variaveis CSS
5. Casos de Uso e Boas Praticas
HSL brilha quando voce precisa criar temas dinamicos com variaveis CSS — basta alterar o valor de --hue para mudar toda a paleta de cores do tema. E uma tecnica muito usada em design systems para suportar multiplos temas.
6. Perguntas Frequentes
HSL e suportado em todos os navegadores?
Sim. hsl() e suportado desde o IE9. A sintaxe moderna com barra para opacidade (hsl(H S% L% / A)) e suportada em todos os navegadores modernos desde 2020.
Quando usar HWB em vez de HSL?
HWB e mais intuitivo quando voce quer misturar uma cor com branco ou preto de forma previsıvel. E especialmente util para criar versoes "pastel" (muito W) ou "escuras" (muito B) de uma cor sem afetar o matiz.