Cores na web: HEX, RGB, HSL e CMYK explicados

Como telas formam cores (RGB aditivo)

Aproxime o olho de um monitor e você vê três luzinhas em cada ponto: uma vermelha, uma verde e uma azul. Cada pixel é um trio desses, e a cor que você enxerga é a soma dessas três luzes. Por isso o modelo se chama RGB aditivo: você parte do preto — tela apagada, nenhuma luz — e vai adicionando intensidade até chegar ao branco, que é todas as três no máximo.

Cada canal vai de 0 a 255. Esse intervalo não é arbitrário: são 8 bits por canal (2⁸ = 256 valores, de 0 a 255). Três canais de 8 bits dão 24 bits no total, o famoso "true color", capaz de representar 256 × 256 × 256 = 16.777.216 cores diferentes. Alguns exemplos rápidos:

• rgb(0, 0, 0) — preto (tudo apagado)
• rgb(255, 255, 255) — branco (tudo no máximo)
• rgb(255, 0, 0) — vermelho puro
• rgb(255, 255, 0) — amarelo (vermelho + verde, sem azul)
• rgb(128, 128, 128) — cinza médio

O detalhe que confunde quem aprendeu pintura na escola: na luz, vermelho mais verde dá amarelo, não um marrom esquisito. A mistura aditiva segue regras próprias porque está somando luz, e não pigmento. Guarde isso — é exatamente o oposto do que acontece na impressão, lá no fim do guia.

HEX: o RGB escrito em hexadecimal

Quando você vê #FF5733 num CSS ou no Figma, isso é apenas RGB disfarçado. O HEX escreve os mesmos três canais, só que em base 16 (hexadecimal) em vez de base 10. Cada canal ocupa dois dígitos hexadecimais, que vão de 00 (0 em decimal) a FF (255 em decimal). O formato é #RRGGBB.

Decodificar é direto. Pegue #1E90FF (o "dodger blue"):

• 1E → 1×16 + 14 = 30 (vermelho)
• 90 → 9×16 + 0 = 144 (verde)
• FF → 15×16 + 15 = 255 (azul)

Ou seja, #1E90FF é exatamente rgb(30, 144, 255). Lembre que, em hexadecimal, as letras A a F valem 10 a 15. O par FF é o teto (255) e 00 é o piso (0). Quando os dois dígitos de cada par são iguais, existe um atalho de três dígitos: #F00 equivale a #FF0000 (vermelho puro) e #FFF a branco. O navegador simplesmente duplica cada dígito.

Antes de jogar um código num CSS, vale conferir se ele está bem formado — três ou seis dígitos hexadecimais (ou oito, com alfa), nada fora do conjunto 0–9/A–F. O Validador de Cor Hexadecimal aponta na hora se faltou um dígito ou se você digitou um G sem querer. E para ir de HEX a RGB (e vice-versa) sem fazer a conta de cabeça, o Conversor de Cores resolve nos dois sentidos.

HSL: pensando em matiz, saturação e luminosidade

RGB e HEX descrevem quanto de cada luz, mas são péssimos para o raciocínio humano. Se eu te pedir "deixe esse azul um pouco mais claro", você não sabe de cabeça quais dos três números mexer. O HSL resolve isso descrevendo a cor do jeito que a gente pensa, com três grandezas:

• H (matiz/hue) — a cor em si, como um ângulo de 0° a 360° numa roda. 0° é vermelho, 120° é verde, 240° é azul, e 360° volta ao vermelho.
• S (saturação) — quão intensa é a cor, de 0% (cinza puro) a 100% (cor vibrante).
• L (luminosidade) — quão clara, de 0% (preto) passando por 50% (cor "cheia") até 100% (branco).

Agora "mais claro" é só aumentar o L. "Mais apagado" é baixar o S. E uma paleta harmônica costuma ser o mesmo H com S e L variando. Vamos converter rgb(255, 128, 0) (um laranja) para HSL para sentir a lógica:

1. Normalize cada canal para 0–1: R = 1, G = 0,502, B = 0.
2. Ache o maior (max = 1, o vermelho) e o menor (min = 0, o azul).
3. Luminosidade: L = (max + min) / 2 = (1 + 0) / 2 = 0,5 → 50%.
4. Saturação: como L = 0,5, S = (max − min) / 1 = 1 → 100%.
5. Matiz: o máximo é o vermelho, então H = 60 × (G − B) / (max − min) = 60 × 0,502 ≈ 30°.

Resultado: hsl(30, 100%, 50%). Faz todo sentido — laranja fica entre o vermelho (0°) e o amarelo (60°), bem no meio, em 30°. O Conversor de Cores também mostra o HSL ao lado do HEX e do RGB, útil quando você quer gerar variações claras e escuras de uma mesma cor de marca.

CMYK e por que a impressão é outra história

Tela emite luz; papel reflete. Essa diferença muda tudo. Na impressão, você parte do branco do papel e vai tirando luz com tinta — modelo subtrativo. As tintas são Ciano, Magenta, Yellow (amarelo) e Key (preto), cada uma medida de 0% a 100%. O preto separado existe por economia e nitidez: misturar as três coloridas no máximo dá um marrom-escuro sujo e encharca o papel, então usa-se tinta preta de verdade.

A conversão de RGB para CMYK começa pelo K. Para o vermelho puro rgb(255, 0, 0):

• R' = 1, G' = 0, B' = 0
• K = 1 − max(R', G', B') = 1 − 1 = 0%
• C = (1 − R' − K) / (1 − K) = (1 − 1) / 1 = 0%
• M = (1 − G' − K) / (1 − K) = (1 − 0) / 1 = 100%
• Y = (1 − B' − K) / (1 − K) = (1 − 0) / 1 = 100%

Logo, vermelho de tela é cmyk(0%, 100%, 100%, 0%) — magenta mais amarelo, sem ciano. O Conversor RGB ⇄ CMYK faz essa volta nos dois sentidos.

O problema mais comum não é a fórmula, é o gamut: o conjunto de cores que cada modelo consegue produzir. O RGB da tela alcança verdes, laranjas e azuis muito mais vibrantes do que qualquer tinta consegue. Quando você manda para impressão um logotipo num verde-limão elétrico, ele sai mais "lavado", porque a cor estava fora do gamut CMYK. Por isso designer de material gráfico já trabalha em CMYK desde o começo. A conversão por fórmula é só uma aproximação; o resultado fiel depende do perfil de cor (ICC) da impressora e do papel.

Contraste e acessibilidade (WCAG)

Escolher cores bonitas não basta: o texto precisa ser legível. As diretrizes WCAG medem isso por uma razão de contraste entre a cor do texto e a do fundo, que vai de 1:1 (cores idênticas, ilegível) a 21:1 (preto puro sobre branco puro, o máximo possível).

O cálculo usa a luminância relativa de cada cor, ponderando o verde bem mais que o azul (o olho humano é mais sensível ao verde). As metas práticas são:

"Texto grande" é a partir de 18pt normal ou 14pt em negrito. Um exemplo prático que muita gente erra: aquele cinza-claro elegante #999999 sobre fundo branco dá só ≈ 2,8:1 — reprovado até no nível AA. O cinza mais claro que ainda passa em AA sobre branco é por volta de #767676 (≈ 4,5:1). Já #FFFF00 (amarelo) sobre branco é praticamente invisível, enquanto o mesmo amarelo sobre preto tem contraste altíssimo. Por isso vale testar a combinação antes de fechar o design, ajustando a luminosidade (o L do HSL) até bater a meta. O Conversor de Cores ajuda a achar uma variação mais escura da sua cor de marca que mantenha a identidade e ganhe contraste.

Perguntas frequentes

HEX e RGB são a mesma cor?

Sim. São apenas duas formas de escrever os mesmos três canais. #1E90FF e rgb(30, 144, 255) produzem exatamente o mesmo pixel na tela — um está em base 16, o outro em base 10. O HEX é mais compacto para CSS; o RGB é mais legível e permite o canal alfa de forma explícita com rgba().

Quando devo usar HSL em vez de HEX?

Use HSL quando precisar raciocinar sobre a cor: criar uma paleta (mesmo matiz, luminosidades diferentes), clarear/escurecer um estado de botão no :hover, ou gerar tons de cinza. Para guardar uma cor fixa num arquivo, HEX é o padrão da maioria das ferramentas. Os dois descrevem a mesma cor; é só uma questão de conveniência.

Por que minha cor fica diferente quando imprimo?

Porque a tela usa RGB (luz, aditivo) e a impressora usa CMYK (tinta, subtrativo), e o gamut do CMYK é menor. Cores muito saturadas — verdes vivos, laranjas neon, azuis elétricos — não existem em tinta e saem mais apagadas. Para reduzir surpresas, trabalhe o arquivo em CMYK desde o início e confie no perfil de cor da gráfica, não só na conversão automática.

O que significam os dois dígitos extras em um HEX de 8 caracteres?

São o canal alfa, ou seja, a opacidade. Em #RRGGBBAA, o par final vai de 00 (totalmente transparente) a FF (totalmente opaco). #00000080, por exemplo, é preto a cerca de 50% de transparência, já que 80 hex é 128.

Qual contraste mínimo o texto precisa ter?

Pela WCAG nível AA, 4,5:1 para texto normal e 3:1 para texto grande (a partir de 18pt, ou 14pt em negrito). O nível AAA, mais exigente, pede 7:1 e 4,5:1 respectivamente. Estas são recomendações de acessibilidade, não aconselhamento jurídico — exigências legais variam por país e por tipo de site.