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

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

Códigos hex são para máquinas. Matiz, saturação e brilho são o jeito como as pessoas realmente pensam em cor: qual cor, quão forte, quão clara. Aprenda os três controles e todo seletor de cores passa 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 intensidade e o brilho é quanta luz ela tem.
- O HSB também é chamado de HSV, em que o V significa valor; os dois nomes descrevem o mesmo modelo.
- O HSL é um parente próximo em que a luminosidade de 50 por cento dá a cor pura e 100 por cento sempre dá branco.
- Ferramentas de design como Figma e Photoshop oferecem seletores HSB, enquanto o CSS aceita hsl() mas não HSB.
- Nem o HSB nem o HSL correspondem ao brilho que o olho percebe, então modelos perceptuais como o OKLCH são melhores para montar escalas uniformes.

**Matiz, saturação e brilho** (HSB) são um jeito de descrever qualquer cor com três controles simples. O **matiz** é qual cor ela é, dado como um ângulo de 0 a 360 graus no círculo cromático. A **saturação** é quão intensa ela é, do cinza em 0 por cento à cor plena em 100 por cento. O **brilho** é quanta luz ela tem, do preto em 0 por cento à versão mais brilhante daquela cor em 100 por cento. Quando você passa a ver as cores assim, ajustar uma paleta deixa de ser adivinhação.

## Matiz: qual cor

O matiz é a posição no [círculo cromático](https://gradiently.design/pt-br/guide/color-wheel). Nos círculos de tela, o vermelho fica em 0 grau, o verde em 120 e o azul em 240, com amarelo, ciano e magenta entre eles. Como o matiz é um ângulo, as harmonias de cor viram aritmética simples: some 180 graus para a 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%)`

Todos os matizes com saturação e brilho máximos. A faixa começa e termina no vermelho porque o matiz é um círculo.

## Saturação: quão forte

A saturação controla quanto do matiz está presente. Diminua e a cor vai se esvaindo para o cinza; aumente e a cor fica viva. A maioria das paletas refinadas vive bem abaixo da saturação máxima. Cores totalmente saturadas gritam, o que é certo para um selo de promoção e cansativo para um site inteiro. [Paletas de cores suaves](https://gradiently.design/pt-br/guide/muted-color-palettes) são, em grande parte, uma questão 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 mesmo matiz violeta com luminosidade fixa, mudando só a saturação. À esquerda, cinza puro; à direita, cor plena.

## Brilho: quanta luz

No HSB, o brilho é quão iluminada a cor está. Em 0 por cento toda cor é preta, seja qual for o matiz ou a saturação. Em 100 por cento você tem a versão mais brilhante que a tela consegue mostrar para aquele matiz e saturação. Para fazer um tom pastel no HSB, você mantém o brilho alto e baixa a saturação, o que mistura branco. É exatamente a ideia por trás de [tons, matizes e sombras](https://gradiently.design/pt-br/guide/tints-tones-shades).

## HSB vs HSL: a diferença que confunde todo mundo

O HSL parece quase idêntico: matiz, saturação, **luminosidade**. O matiz é o mesmo. O que muda é o terceiro controle. No HSL, luminosidade de 50 por cento é a cor pura, 0 por cento é preto e 100 por cento é sempre branco. No HSB, brilho de 100 por cento é a cor pura quando a saturação está no máximo, e você só chega ao branco baixando também a saturação. Os números de saturação também diferem entre os dois, então 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. Sempre confira qual modelo o seletor está usando antes de copiar os 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 nos seletores de muitas ferramentas de design, incluindo Photoshop e Figma
- Não disponível diretamente em CSS

### HSL

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

## Usando HSL em CSS

O CSS entende `hsl()` diretamente, o que é prático para temas. Guarde o matiz numa variável e você muda a cor de uma interface inteira com um número. Existe também `hwb()` (matiz, brancura, negrura), que se aproxima mais do espírito do HSB. Os detalhes estão na [página de hsl() do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), e [cores HSL](https://gradiently.design/pt-br/guide/hsl-colors) vai mais fundo.

```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 cria as versões suave e profunda; a saturação cria a apagada.

## Por que a mesma luminosidade não parece igual

HSB e HSL são geometria, não percepção. O amarelo puro e o azul puro ficam ambos em luminosidade HSL de 50 por cento, mas o amarelo parece muito mais claro: pela fórmula das WCAG, a luminância relativa dele é de cerca de 0,93, contra 0,07 do azul. Coloque texto branco sobre cada um e a diferença fica óbvia. É por isso que uma paleta feita avançando a luminosidade HSL em passos iguais pode parecer irregular, e por isso o contraste do texto sempre precisa ser conferido, nunca presumido.

- 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 com a mesma luminosidade HSL. Sobre branco, o amarelo chega a cerca de 1,07:1 e o azul a cerca de 8,6:1.

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

## Jeitos rápidos de ajustar uma cor com HSB

- **Gritante demais:** baixe a saturação de 15 a 25 pontos antes de mexer em qualquer outra coisa.
- **Apagada demais:** suba um pouco a saturação ou puxe o matiz alguns graus para o lado quente.
- **Precisa de um estado de hover:** baixe o brilho em cerca de 10 pontos.
- **Precisa de um fundo levemente tingido:** mantenha o matiz, baixe bastante a saturação e leve o brilho para perto de 100.
- **Duas cores brigam:** aproxime um matiz do outro ou suavize uma delas.

Se você prefere começar de um visual pronto em vez de três controles deslizantes, o Mercado do Gradiently permite 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 da cor no círculo cromático, a saturação é quão intensa ela é e o brilho é quanta luz ela tem. Juntos, descrevem qualquer cor de tela.

### HSB é o mesmo que HSV?

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

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

No HSB, brilho de 100 por cento com saturação máxima é a cor pura. No HSL, luminosidade de 50 por cento é a cor pura e 100 por cento é branco.

### Posso usar HSB em CSS?

Não diretamente. O CSS aceita `hsl()`, `hwb()` e `oklch()`, então converta os valores HSB para um desses.

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

O matiz é qual cor ela é, como vermelho ou azul. A saturação é quão forte essa cor é, do cinza ao vivo.