# Cor HSL: a forma mais amigável de escrever cores em CSS

[Canonical HTML page](https://gradiently.design/pt-pt/guide/hsl-colors)

O hex diz ao navegador o que pintar. O HSL diz-te o que a cor é: que matiz, quão viva, quão clara. Isso faz dele o formato mais fácil de editar à mão.

## The short version

- Uma cor HSL descreve uma cor por matiz, saturação e luminosidade em vez de quantidades de vermelho, verde e azul.
- O matiz é um ângulo no círculo cromático de 0 a 360 graus, onde 0 é vermelho, 120 é verde e 240 é azul.
- A saturação vai de 0% (cinzento) a 100% (cor plena), e a luminosidade vai de 0% (preto) passando por 50% (o matiz puro) até 100% (branco).
- O CSS moderno escreve-a como hsl(262 83% 58%), com um alfa opcional depois de uma barra, e todos os navegadores em uso a suportam.
- A luminosidade do HSL não é o brilho com que uma cor parece às pessoas, por isso duas cores com a mesma luminosidade podem diferir enormemente em contraste.

Uma **cor HSL** escreve-se com três números: matiz, saturação e luminosidade. Em CSS, `hsl(262 83% 58%)` significa um matiz de 262 graus (violeta), 83% de saturação (viva) e 58% de luminosidade (um pouco acima do ponto médio). É o mesmo violeta que `#7c3bed`, mas consegues lê-lo. Queres mais claro? Sobe o último número. Mais suave? Baixa o do meio. Essa propriedade única, um significado por número, é a razão de o HSL ser a forma mais amigável de escrever cores à mão.

## O que significam matiz, saturação e luminosidade

O **matiz** é uma posição no [círculo cromático](https://gradiently.design/pt-pt/guide/color-wheel), dada em graus. O vermelho está em 0 e outra vez em 360, o amarelo em 60, o verde em 120, o ciano em 180, o azul em 240 e o magenta em 300. Mover o matiz roda a cor mantendo a sua força.

Matiz de 0 a 360 graus: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%)`

Todos os matizes a 100% de saturação e 50% de luminosidade. Lê da esquerda para a direita: 0, 60, 120, 180, 240, 300 e de volta a 360.

A **saturação** é a quantidade de cor. A 0% todos os matizes são o mesmo cinzento; a 100% é tão viva quanto o ecrã permite. A **luminosidade** vai do preto a 0% ao branco a 100%, com o matiz puro a 50%. O modelo é tratado de forma mais ampla em [matiz, saturação e brilho](https://gradiently.design/pt-pt/guide/hue-saturation-brightness), que também explica como o HSB das aplicações de design difere do HSL do CSS.

| Valor | Intervalo | O que muda ao alterá-lo |
| --- | --- | --- |
| Matiz | 0 a 360 (graus) | Roda a cor: de violeta a azul e a verde-azulado |
| Saturação | 0% a 100% | De cinzento a cor plena |
| Luminosidade | 0% a 100% | De preto, passando pelo matiz puro a 50%, até branco |
| Alfa (opcional) | 0 a 1, ou 0% a 100% | De invisível a opaco |

Quatro números, cada um com uma só função. Essa separação é todo o atrativo.

## Sintaxe HSL em CSS

Há duas grafias. A moderna separa os valores com espaços e põe o alfa depois de uma barra. A mais antiga usa vírgulas e uma função `hsla()` à parte. Os navegadores aceitam ambas, e o `hsl()` já aceita alfa também, por isso o `hsla()` deixou de ser necessário. A [referência da MDN para hsl()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) lista todas as formas.

```css
.button {
  /* modern syntax */
  background: hsl(262 83% 58%);

  /* with 80% opacity */
  background: hsl(262 83% 58% / 0.8);

  /* older comma syntax, still valid */
  background: hsla(262, 83%, 58%, 0.8);

  /* hue can carry a unit */
  background: hsl(262deg 83% 58%);
}
```

As quatro são o mesmo violeta. A segunda e a terceira juntam 80% de opacidade.

## Constrói uma escala de cor mudando a luminosidade

É aqui que o HSL ganha o seu lugar. Mantém o matiz e a saturação fixos, vai variando a luminosidade e tens uma família de [tons claros e escuros](https://gradiently.design/pt-pt/guide/tints-tones-shades) que claramente pertencem juntos. Eis um violeta em sete passos, com o hex para que cada um se converte.

- L 95% #efe8fd: #efe8fd
- L 85% #d0b9f8: #d0b9f8
- L 70% #a273f2: #a273f2
- L 58% #7c3bed: #7c3bed
- L 45% #5914d2: #5914d2
- L 30% #3c0d8c: #3c0d8c
- L 15% #1e0746: #1e0746

hsl(262 83% L) em sete valores de luminosidade. Passos claros para fundos, o do meio para botões, passos escuros para texto.

Combina isto com propriedades personalizadas de CSS e todo o teu tema fica dependente de dois números. Guarda o matiz e a saturação uma só vez e depois escolhe uma luminosidade por função. Muda a variável do matiz e toda a interface passa de violeta a verde-azulado, que é a ideia por trás de [variáveis CSS para temas](https://gradiently.design/pt-pt/guide/css-custom-properties-theming).

```css
:root {
  --brand-h: 262;
  --brand-s: 83%;

  --brand-50:  hsl(var(--brand-h) var(--brand-s) 95%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 85%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 58%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 30%);
}

/* a teal theme is one line */
.theme-teal {
  --brand-h: 175;
}
```

Todas as cores da marca derivam do mesmo matiz, por isso a escala nunca pode sair da família.

### Cores relativas

Os navegadores mais recentes suportam também a sintaxe de cor relativa, que lê as partes HSL de qualquer cor e te deixa ajustá-las. `hsl(from var(--brand) h s calc(l + 15%))` dá uma versão mais clara seja qual for a cor da marca, mesmo que tenha sido definida em hex. Confirma o suporte atual no caniuse antes de contares com isso e mantém uma alternativa simples. Para misturar duas cores em vez de empurrar uma, [color-mix() em CSS](https://gradiently.design/pt-pt/guide/css-color-mix) é a ferramenta.

## Onde o HSL te engana

O HSL é um rearranjo do RGB, não um modelo da visão humana. A sua luminosidade é uma simples média do canal mais claro e do mais escuro, por isso ignora o facto de os nossos olhos verem o amarelo e o verde como muito mais brilhantes do que o azul. O resultado: duas cores com luminosidade HSL idêntica podem parecer completamente diferentes em brilho.

- hsl(60 100% 50%): #ffff00
- hsl(120 100% 50%): #00ff00
- hsl(0 100% 50%): #ff0000
- hsl(240 100% 50%): #0000ff

As quatro têm 50% de luminosidade. Contra branco, o amarelo tem um rácio de contraste de cerca de 1,07:1 e o azul de cerca de 8,6:1.

Isto importa em dois sítios. Primeiro, uma escala construída variando a luminosidade HSL será desigual entre matizes: um amarelo a 50% é claro demais para texto, enquanto um azul a 50% passa com facilidade. Testa sempre pares reais com um [verificador de contraste](https://gradiently.design/pt-pt/guide/color-contrast-accessibility). Segundo, os gradientes e as paletas geradas que rodam o matiz a luminosidade fixa vão ficar mais brilhantes e mais ténues ao passar pelo amarelo e pelo azul.

### O HSL é bom para

- Ler e editar cores à mão
- Tons claros e escuros de um só matiz
- Troca rápida de tema com variáveis
- Dessaturar uma cor para um estado esbatido

### Usa antes OKLCH para

- Escalas que coincidem entre matizes diferentes
- Contraste previsível a partir de um valor de luminosidade
- Gradientes que se mantêm uniformes em brilho
- Paletas geradas para sistemas de design

O [OKLCH](https://gradiently.design/pt-pt/guide/oklch-explained) mantém a mesma ideia amigável (luminosidade, colorido, matiz) mas mede a luminosidade como os olhos o fazem. Se estás a começar um sistema de design novo, é a melhor opção por omissão; se estás a editar CSS existente ou queres um ajuste rápido e legível, o HSL continua perfeitamente bom.

## Converter HSL em hex e vice-versa

Raramente precisas de fazer as contas, já que todas as ferramentas de design e painéis de ferramentas de programador dos navegadores convertem por ti: clica numa amostra de cor nas ferramentas do Chrome ou do Firefox e percorre os formatos. Por baixo, o HSL converte-se primeiro em RGB, e de RGB para hex é aritmética simples de pares, explicada em [hex para RGB](https://gradiently.design/pt-pt/guide/hex-to-rgb). Espera pequenas diferenças de arredondamento: `hsl(262 83% 58%)` cai em `#7c3bed`, um passo ao lado do `#7c3aed` com que podias ter começado, porque percentagens inteiras não conseguem atingir cada um dos 16,7 milhões de valores hex.

Se desenhas no Gradiently, raramente tocas nestes números: um Mark traz a sua própria paleta e, no Pro, o kit de marca guarda as tuas cores para que o Designer as aplique por ti.

## FAQ

### O que significa HSL?

Matiz, saturação e luminosidade (em inglês, hue, saturation e lightness). O matiz é o ângulo no círculo cromático, a saturação é quão viva é a cor e a luminosidade é quão perto está do preto ou do branco.

### Como escrevo uma cor HSL em CSS?

Usa hsl(matiz saturação% luminosidade%), por exemplo hsl(262 83% 58%). Junta transparência depois de uma barra: `hsl(262 83% 58% / 0.5)`.

### O hsla() ainda é necessário?

Não. O hsl() aceita um valor alfa em todos os navegadores atuais, por isso o hsla() só se mantém para código mais antigo.

### Qual é a diferença entre HSL e RGB?

O RGB diz quanta luz vermelha, verde e azul misturar; o HSL diz que matiz, quão viva e quão clara. Descrevem as mesmas cores, mas o HSL é mais fácil de ajustar à mão.

### Porque é que duas cores HSL com a mesma luminosidade parecem diferentes?

A luminosidade HSL ignora a sensibilidade dos olhos a cada matiz, por isso o amarelo parece muito mais brilhante do que o azul ao mesmo valor. O OKLCH resolve isto com luminosidade percetual.