Matiz, saturação e luminosidade explicados

Matiz é a família da cor (vermelho, verde, azul). Saturação é o quanto a cor é viva ou apagada. Luminosidade é o quanto ela é clara ou escura. Toda cor que você vê numa tela pode ser descrita por esses três números, e mexer em um de cada vez é a forma mais segura de criar variações que combinam entre si.

Matiz: o nome da cor

O matiz é a resposta para “que cor é essa?”. Vermelho, laranja, amarelo, verde, azul e roxo são matizes. Na roda de cores, cada matiz ocupa uma posição, medida em graus de 0 a 360. No padrão usado em CSS, o vermelho puro fica em 0°, o verde em 120° e o azul em 240°. Se você quer ver a roda inteira, o artigo roda de cores mostra como lê-la.

Trocar o matiz muda a cor “de verdade”: o azul vira verde, o verde vira amarelo. O resto fica igual. Por isso, quando alguém diz “quero a mesma cor, mas mais para o rosado”, está pedindo uma pequena mudança de matiz.

Saturação: viva ou apagada

A saturação mede a intensidade. Uma cor com saturação alta é forte, quase “gritando”. Com saturação baixa, ela vai ficando acinzentada. Em zero, vira um cinza puro. Nos formatos de tela como o HSL, a saturação vai de 0% a 100%.

Um exemplo do dia a dia: o tomate maduro, bem vermelho, tem saturação alta. A mesma cor num tecido desbotado depois de muitas lavagens tem saturação baixa. O matiz é o mesmo, só a intensidade caiu.

Cores muito saturadas chamam atenção e cansam rápido quando ocupam áreas grandes. Cores menos saturadas descansam o olho e servem bem de fundo. Esse é um jeito prático de organizar uma paleta: o fundo com saturação baixa, o destaque com saturação alta, e o destaque aparece mais porque o resto é calmo.

Luminosidade: clara ou escura

A luminosidade diz o quanto a cor está perto do branco ou do preto. No HSL, 0% é preto, 100% é branco e 50% é a cor “normal”. Quanto mais você sobe, mais clara fica a cor, o que na prática é uma versão pastel. Quanto mais desce, mais escura.

Atenção a um detalhe: a luminosidade do HSL é um cálculo simples do computador, e ela nem sempre bate com o que os olhos percebem. Dois matizes diferentes, ambos com 50% de luminosidade, podem parecer um mais claro e outro mais escuro. Pela fórmula de luminância relativa da WCAG, que mede o brilho percebido, o azul puro #0000FF dá 0,07 e o amarelo puro #FFFF00 dá 0,93, embora os dois tenham 50% de luminosidade no HSL. Por isso, confie nos números como ponto de partida e use os olhos (e o teste de contraste) para a decisão final.

Em livros de arte, esse eixo claro-escuro costuma aparecer como “valor”. O sistema de cores de Albert Munsell, de 1905, descreve as cores por três atributos: matiz, valor (a luminosidade) e croma (a saturação). Os nomes mudam, mas a ideia é a mesma.

Os três botões ao mesmo tempo, com o azul como exemplo

Imagine um cubo de três botões. Cada um mexe em uma coisa, e a cor final é a combinação.

Botão	O que muda	Exemplo com azul
Matiz	A família	Azul vira verde-azulado
Saturação	A intensidade	Azul vivo vira azul-acinzentado
Luminosidade	Claro ou escuro	Azul vira azul-marinho ou azul-bebê

Com esse raciocínio, você monta uma paleta inteira a partir de uma só cor. Os azuis da paleta deste artigo têm o mesmo matiz aproximado (entre 212° e 216°) e mudam principalmente na luminosidade: #1E3A5F (escuro), #3B6EA8 (médio), #8FB3DB (claro), #D9E6F5 (bem claro) e #F2F4F7 (quase branco, bem pouco saturado).

Do verde-oliva a cinco tons: variações para um perfil de bordados

Digamos que você vende bordados e escolheu um verde-oliva como cor da marca.

1. Guarde o matiz. Anote a posição do verde-oliva na roda. Ele será o fio condutor.
2. Crie um tom escuro baixando a luminosidade. Use para títulos e para o texto.
3. Crie um tom claro subindo a luminosidade e reduzindo um pouco a saturação. Use para fundos de cartões e de destaques.
4. Crie um tom de destaque mantendo a luminosidade média e aumentando a saturação. Use para um botão ou um selo.
5. Confira o texto. Teste o escuro sobre o claro. Se a leitura ficar sofrida, afaste mais os dois na luminosidade.
6. Olhe tudo junto no editor. Se uma variação parece “de outra família”, provavelmente o matiz derivou. Volte ao ponto 1.

Esse método dá uma paleta coesa porque a “família” nunca muda. É o que designers chamam de paleta monocromática: uma única cor em vários tons.

Quatro erros ao mexer em matiz, saturação e luminosidade

Escurecer só misturando preto. Em tinta e em programa de edição, adicionar preto ou cinza costuma deixar a cor sem vida. Em geral fica melhor baixar a luminosidade e ajustar um pouco o matiz e a saturação, olhando o resultado.

Subir a saturação para “dar mais vida”. Muita saturação em áreas grandes cansa. Reserve a cor mais viva para o que precisa ser visto.

Trocar saturação e luminosidade. Se a cor ficou “lavada”, não adianta escurecê-la. Falta saturação. Se ficou “pesada”, o problema é a luminosidade. Identifique qual botão está errado antes de mexer.

Confiar só nos números. Como a luminosidade calculada não é igual à percebida, uma paleta pode parecer desequilibrada mesmo com valores “certos”. Olhe também em escala de cinza: se dois elementos que deveriam se separar ficam do mesmo cinza, eles têm pouco contraste. O tema é aprofundado em contraste de valor, matiz e saturação.

Os três botões escritos em hsl()

Se você mexe no código do site, o formato hsl() usa exatamente esses três botões, nessa ordem. Por exemplo, hsl(210 55% 40%) é um azul médio: matiz 210°, saturação 55% e luminosidade 40%. Para fazer um tom mais claro, basta trocar o último número. O artigo Cores em CSS: HEX, RGB e HSL mostra os três formatos lado a lado.

Se você não programa, o editor do Tom a Tom faz o mesmo com controles deslizantes. Arraste um por vez e observe o que muda. Em poucos minutos, a diferença entre os três deixa de ser teoria e vira intuição. Um bom primeiro exercício: pegue a cor da sua marca e crie só a versão escura, mexendo apenas na luminosidade.