Ao estilizar sites, uma das formas mais versáteis e intuitivas de trabalhar com cor é usando o modelo de cor HSL. HSL significa Matiz, Saturação e Luminosidade — três componentes-chave que definem uma cor. O modelo de cor HSL representa as cores de uma forma mais alinhada com a percepção humana da cor. Nesta lição, vamos explorar o que é o modelo de cor HSL e como a função hsl() é usada no CSS. A matiz é o tipo de cor, representada como um ângulo no círculo cromático, que varia de 0 a 360 graus. Por exemplo, 0 graus representa o vermelho, 120 graus é o verde e 240 graus é o azul. Ajustando a matiz, você percorre diferentes cores no espectro. A saturação se refere à intensidade ou pureza da cor. Ela é medida como uma porcentagem de 0% (uma cor totalmente dessaturada, em tons de cinza) até 100% (a forma mais vibrante daquela cor). Uma cor com saturação 100% é totalmente vívida, enquanto uma cor com saturação 0% aparece como um tom de cinza. A luminosidade determina o quão clara ou escura a cor é, também medida como uma porcentagem. Um valor de luminosidade 0% produzirá preto, 50% dará o tom normal da matiz e 100% resultará em branco. No CSS, a função hsl() é usada para definir cores usando o modelo de cor HSL. A sintaxe moderna usa valores separados por espaço:

element {
  color: hsl(hue saturation lightness);
}

Você também pode encontrar a sintaxe antiga com valores separados por vírgula em códigos existentes, que ainda é suportada pelos navegadores:

element {
  color: hsl(hue, saturation, lightness);
}

Vamos analisar isso com um exemplo:

<link rel="stylesheet" href="styles.css" />
<p>This is a paragraph.</p>

body {
  background-color: hsl(0 0% 1% / 1);
}

p {
  color: hsl(120 100% 50%);
}

Neste caso, a matiz é 120 graus, que corresponde ao verde. A saturação é 100%, então o verde será totalmente vívido. A luminosidade é 50%, então está no tom normal — nem muito escuro nem muito claro. Como resultado, a cor do texto do parágrafo será um verde brilhante. Uma das principais vantagens do modelo de cor HSL é sua natureza intuitiva. Ele facilita ajustar a vivacidade ou a luminosidade de uma cor mexendo nos valores de saturação e luminosidade sem precisar alterar a cor base (matiz). Por exemplo, se você quiser criar diferentes tons ou matizes da mesma cor, pode simplesmente ajustar o valor da luminosidade.

<link rel="stylesheet" href="styles.css" />
<div class="light">This is a light blue div.</div>
<div class="dark">This is a dark blue div.</div>

div.light {
  background-color: hsl(240 100% 80%);
}

div.dark {
  background-color: hsl(240 100% 20%);
  color: hsl(0 0% 100%);
}

Aqui, ambos os elementos div estão usando a mesma matiz (240 graus, que é azul), mas um tem luminosidade 80% (um tom mais claro de azul) e o outro tem luminosidade 20% (um tom mais escuro de azul). Assim como o modelo RGB, a função hsl() também suporta um valor alfa opcional para controlar a transparência. Você o adiciona após um separador / como um quarto parâmetro. Aqui está a sintaxe básica:

element {
  background-color: hsl(hue saturation lightness / alpha);
}

Vamos ver um exemplo:

<link rel="stylesheet" href="styles.css" />
<div>This is a div.</div>

div {
  background-color: hsl(0 100% 50% / 0.5);
}

Esse código daria ao div um fundo vermelho semi-transparente, onde a matiz está definida como 0 graus (vermelho), a saturação é 100%, a luminosidade é 50% e o alfa é 0.5 (50% de opacidade). Você também pode especificar o alfa como uma porcentagem — por exemplo, hsl(0 100% 50% / 50%) é equivalente a hsl(0 100% 50% / 0.5). Você também verá com frequência a função hsla() em CSS existente. Essa foi a forma original de incluir transparência em cores HSL, usando valores separados por vírgula:

element {
  background-color: hsla(hue, saturation, lightness, alpha);
}

Por exemplo, hsla(0, 100%, 50%, 0.5) é o equivalente legado de hsl(0 100% 50% / 0.5). Ambos são suportados pelos navegadores, mas a sintaxe moderna hsl() com o separador / é agora a preferida. O modelo de cor HSL é particularmente útil quando você precisa criar esquemas de cores e ajustar tons ou matizes facilmente. Como o HSL separa a matiz da saturação e da luminosidade, você pode manter um tema de cor consistente enquanto ajusta a luminosidade para sombras ou realces. Esse nível de flexibilidade faz do HSL um favorito entre designers e desenvolvedores. Além disso, o HSL torna os valores de cor mais legíveis e compreensíveis quando comparados a outros métodos como códigos hexadecimais ou RGB. Você pode ver mais claramente a intenção por trás da cor e ajustar conforme necessário, especialmente ao experimentar diferentes designs. Com o modelo de cor HSL, você ganha mais flexibilidade no controle dos tons, saturação e luminosidade, tornando-o uma ferramenta poderosa para criar designs ricos e dinâmicos em CSS.