# Matiz, saturação e brilho (HSB) explicados de forma simples

[Canonical HTML page](https://gradiently.design/pt-pt/guide/hue-saturation-brightness)

Os códigos hex são para máquinas. Matiz, saturação e brilho são a forma como as pessoas pensam realmente a cor: que cor, quão forte, quão clara. Aprende os três botões e todos os seletores de cor passam a fazer sentido.

## The short version

- Matiz, saturação e brilho, ou HSB, descrevem uma cor com três números: o matiz é o ângulo da cor no círculo, a saturação é a sua intensidade e o brilho é a quantidade de luz que tem.
- O HSB também se chama HSV, onde o V significa valor; os dois nomes descrevem o mesmo modelo.
- O HSL é um parente próximo em que uma luminosidade de 50 por cento dá a cor pura e 100 por cento dá sempre branco.
- Ferramentas de design como o Figma e o Photoshop oferecem seletores HSB, enquanto o CSS suporta hsl() mas não HSB.
- Nem o HSB nem o HSL correspondem ao brilho com que as cores parecem ao olho, por isso modelos percetuais como o OKLCH são melhores para construir escalas uniformes.

**Matiz, saturação e brilho** (HSB) é uma forma de descrever qualquer cor com três botões simples. O **matiz** é que cor é, dado como um ângulo de 0 a 360 graus à volta do círculo cromático. A **saturação** é quão intensa é, de cinzento a 0 por cento a cor plena a 100 por cento. O **brilho** é a quantidade de luz que tem, de preto a 0 por cento à versão mais brilhante dessa cor a 100 por cento. Quando vês as cores assim, ajustar uma paleta deixa de ser adivinhar.

## Matiz: que cor

O matiz é a posição no [círculo cromático](https://gradiently.design/pt-pt/guide/color-wheel). Nos círculos de ecrã, o vermelho fica a 0 graus, o verde a 120 e o azul a 240, com o amarelo, o ciano e o magenta pelo meio. Como o matiz é um ângulo, as harmonias de cor tornam-se aritmética simples: soma 180 graus para um complementar, 120 para uma tríade.

Matiz de 0 a 360 graus: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)`

A gama completa de matizes com saturação e brilho máximos. A faixa começa e acaba no vermelho porque o matiz é um círculo.

## Saturação: quão forte

A saturação controla quanto do matiz está presente. Baixa-a e a cor esvazia-se para o cinzento; sobe-a e a cor fica viva. A maioria das paletas refinadas vive bem abaixo da saturação total. As cores totalmente saturadas gritam, o que é certo para um autocolante de saldos e cansativo para um site inteiro. [As paletas de cores esbatidas](https://gradiently.design/pt-pt/guide/muted-color-palettes) são sobretudo uma história de saturação mais baixa.

- Saturação 0%: #808080
- Saturação 25%: #7f609f
- Saturação 50%: #7f40bf
- Saturação 75%: #7f20df
- Saturação 100%: #7f00ff

Um matiz violeta com luminosidade fixa, mudando só a saturação. À esquerda é cinzento puro, à direita é cor plena.

## Brilho: quanta luz

No HSB, o brilho é o quão iluminada está a cor. A 0 por cento toda a cor é preta, seja qual for o matiz ou a saturação. A 100 por cento tens a versão mais brilhante que o ecrã consegue mostrar para esse matiz e saturação. Para fazer um pastel pálido em HSB manténs o brilho alto e baixas a saturação, o que mistura branco. É exatamente a ideia por trás de [tons claros, médios e escuros](https://gradiently.design/pt-pt/guide/tints-tones-shades).

## HSB vs HSL: a diferença que confunde toda a gente

O HSL parece quase idêntico: matiz, saturação, **luminosidade**. O matiz é o mesmo. O que difere é o terceiro botão. No HSL, uma luminosidade de 50 por cento é a cor pura, 0 por cento é preto e 100 por cento é sempre branco. No HSB, um brilho de 100 por cento é a cor pura quando a saturação é total, e só chegas ao branco baixando também a saturação. Os valores de saturação também diferem entre os dois, por isso a mesma cor tem valores diferentes em cada um.

| Cor | Hex | HSB | HSL |
| --- | --- | --- | --- |
| Vermelho puro | `#ff0000` | 0°, 100%, 100% | 0°, 100%, 50% |
| Violeta | `#7c3aed` | 262°, 76%, 93% | 262°, 83%, 58% |
| Verde-azulado profundo | `#0f766e` | 175°, 87%, 46% | 175°, 77%, 26% |
| Laranja vivo | `#f97316` | 25°, 91%, 98% | 25°, 95%, 53% |
| Branco | `#ffffff` | Qualquer matiz, 0%, 100% | Qualquer matiz, qualquer saturação, 100% |

O matiz coincide; a saturação e o terceiro valor não. Confirma sempre que modelo um seletor está a usar antes de copiares números.

### HSB (também chamado HSV)

- Brilho 100% com saturação 100% é a cor pura
- O branco precisa de brilho 100% e saturação 0%
- Usado em muitos seletores de ferramentas de design, incluindo o Photoshop e o Figma
- Não está disponível diretamente em CSS

### HSL

- Luminosidade 50% é a cor pura
- Luminosidade 100% é sempre branco
- Escrito nativamente em CSS como `hsl()`
- Fácil para fazer versões mais claras e mais escuras

## Usar HSL em CSS

O CSS entende `hsl()` diretamente, o que o torna útil para temas. Guarda o matiz numa variável e podes deslocar a cor de uma interface inteira com um só número. Existe também `hwb()` (matiz, brancura, negrura), que é mais próximo do HSB no espírito. Os pormenores estão na [página de hsl() da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), e [cores HSL](https://gradiently.design/pt-pt/guide/hsl-colors) vai mais longe.

```css
:root {
  --hue: 262;
  --brand: hsl(var(--hue) 83% 58%);   /* #7c3aed */
  --brand-soft: hsl(var(--hue) 83% 92%);
  --brand-deep: hsl(var(--hue) 70% 28%);
  --brand-muted: hsl(var(--hue) 25% 55%);
}

/* Change --hue to 175 and the whole set turns teal */
```

Um matiz, quatro funções. A luminosidade faz as versões suave e profunda; a saturação faz a esbatida.

## Porque é que luminosidade igual não parece igual

O HSB e o HSL são geometria, não perceção. O amarelo puro e o azul puro estão ambos a uma luminosidade HSL de 50 por cento, e no entanto o amarelo parece muito mais brilhante: pela fórmula WCAG a sua luminância relativa é cerca de 0,93 contra 0,07 do azul. Põe texto branco sobre cada um e a diferença é óbvia. É por isso que uma paleta construída variando a luminosidade HSL por igual pode parecer irregular, e porque o contraste do texto tem de ser sempre verificado e não assumido.

- Amarelo, HSL 60° 100% 50%: #ffff00
- Verde, HSL 120° 100% 50%: #00ff00
- Vermelho, HSL 0° 100% 50%: #ff0000
- Azul, HSL 240° 100% 50%: #0000ff

Quatro cores exatamente à mesma luminosidade HSL. Contra branco, o amarelo consegue cerca de 1,07:1 e o azul cerca de 8,6:1.

Os modelos percetuais resolvem isto. O [OKLCH](https://gradiently.design/pt-pt/guide/oklch-explained) mantém a ideia amigável de luminosidade, croma e matiz, mas a sua luminosidade acompanha o que o olho vê, por isso os passos parecem uniformes. Para ajustes rápidos o HSB e o HSL são perfeitos; para uma escala de marca ou um [gradiente que evita meios lamacentos](https://gradiently.design/pt-pt/guide/gradient-interpolation), recorre ao OKLCH.

## Formas rápidas de ajustar uma cor com HSB

- **Demasiado forte:** baixa a saturação 15 a 25 pontos antes de tocares em mais nada.
- **Demasiado baça:** sobe ligeiramente a saturação, ou empurra o matiz uns graus para o quente.
- **Precisas de um estado de hover:** baixa o brilho cerca de 10 pontos.
- **Precisas de um tom de fundo:** mantém o matiz, baixa muito a saturação e leva o brilho para perto de 100.
- **Duas cores chocam:** aproxima um matiz do outro, ou esbate uma delas.

Se preferires partir de um visual acabado em vez de três cursores, o Mercado do Gradiently deixa-te pesquisar Marks por palavras de cor como “verde-azulado profundo” ou “pêssego quente”.

## FAQ

### O que são matiz, saturação e brilho?

O matiz é o ângulo de uma cor no círculo cromático, a saturação é a sua intensidade e o brilho é a quantidade de luz que tem. Juntos descrevem qualquer cor de ecrã.

### O HSB é o mesmo que o HSV?

Sim. HSV significa matiz, saturação, valor (hue, saturation, value), e valor significa o mesmo que brilho.

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

No HSB, um brilho de 100 por cento com saturação total é a cor pura. No HSL, uma luminosidade de 50 por cento é a cor pura e 100 por cento é branco.

### Posso usar HSB em CSS?

Não diretamente. O CSS suporta `hsl()`, `hwb()` e `oklch()`, por isso converte os valores HSB para um deles.

### Qual é a diferença entre matiz e saturação?

O matiz é que cor é, como vermelho ou azul. A saturação é quão forte é essa cor, de cinzento a viva.