Hex, RGB, HSL e CMYK: os códigos de cor explicados direito
Quatro formas de escrever a mesma cor, e a única que torna fácil montar uma paleta. Como ler um código hex a olho, por que o CMYK não alcança a sua tela e o que o contraste realmente exige.
Atualizado em 22 de agosto de 20268 min de leitura
Hex, RGB, HSL e CMYK são quatro notações para a mesma coisa, do jeito que meio, 0,5 e 50% são três notações para uma única quantidade. Converter entre as três primeiras é aritmética exata, sem perder nada. O interessante não é a conversão — é que um desses modelos torna o desenho de uma paleta quase mecânico, e quase ninguém o usa porque códigos hex foram a primeira coisa que lhe puseram na mão.
As quatro notações
| Notação | Exemplo | O que diz | Onde você a encontra |
|---|---|---|---|
| Hex | #3B82F6 | Vermelho, verde e azul na base 16 | CSS, ferramentas de design, manuais de marca |
| RGB | rgb(59, 130, 246) | Os mesmos três números, de 0 a 255 | CSS, editores de imagem, código |
| HSL | hsl(217, 91%, 60%) | Matiz, saturação, luminosidade | Desenho de paletas, temas |
| CMYK | 76, 47, 0, 4 | Porcentagens de tinta para quatro chapas | Impressão, e só impressão |
Hex e RGB são a mesma informação escrita de duas maneiras. Um código hex tem seis dígitos em três pares — vermelho, verde, azul — e cada par é um número de 00 a FF, ou seja, de 0 a 255 na contagem comum. Então #3B82F6 é vermelho 3B (59), verde 82 (130), azul F6 (246). O conversor de hex para RGB faz isso na hora, mas vale conhecer a estrutura porque ela permite ler um código aproximadamente a olho.
Códigos hex de três dígitos são uma abreviação em que cada dígito é duplicado: #F60 significa #FF6600. E um código de oito dígitos acrescenta um quarto par para o alfa, então #3B82F680 é o mesmo azul a 50% de opacidade. Os dois aparecem em folhas de estilo reais e confundem quem espera seis dígitos.
Por que o HSL é o que vale a pena aprender
O RGB descreve a cor do jeito que uma tela a produz — três luzes em três intensidades — o que é uma descrição do hardware, não do que você vê. É quase inútil para decisões de design. Peça uma versão um pouco mais escura de #3B82F6 e o RGB não dá resposta óbvia. Pergunte qual de duas cores é mais saturada e você tem de parar para pensar.
O HSL descreve a cor do jeito que as pessoas falam dela. Matiz é a posição no círculo cromático, de 0 a 360 graus: vermelho em 0, verde em 120, azul em 240. Saturação vai de 0% (cinza) a 100% (vívido). Luminosidade vai de 0% (preto), passando por 50% (a cor pura), até 100% (branco). Cada um é um botão separado, e cada botão faz exatamente uma coisa.
- Um tom mais escuro da mesma cor. Mantenha matiz e saturação e baixe a luminosidade.
hsl(217, 91%, 60%)virahsl(217, 91%, 45%)— um estado de hover, resolvido. - Uma versão suave para fundos. Mantenha matiz e luminosidade e derrube a saturação para 15%. Ela ainda será lida como parte da mesma família.
- Um destaque complementar. Some 180 ao matiz. Some 30 para um vizinho que harmoniza em vez de contrastar.
- Uma escala completa de tons para um sistema de design. Um matiz, uma saturação, luminosidades de 95, 90, 80, 65, 50, 40, 30 e 20. São oito degraus a partir de uma única decisão.
- Uma paleta que se sustenta. Escolha três ou quatro matizes espaçados igualmente no círculo e mantenha saturação e luminosidade constantes. Cores escolhidas assim combinam sozinhas.
Nada disso está disponível em hex ou RGB sem conversão, e esse é o argumento prático para passar sua cor de marca uma vez pelo conversor de RGB para HSL e pensar nesse espaço. O gerador de paletas aplica a mesma lógica de rotação de matiz — num espaço de cor perceptual, para que a luminosidade continue de fato igual — se você preferir partir de um resultado em vez da aritmética.
Hex, RGB, HSL e CMYK em todas as direções — convertidos no seu dispositivo, sem enviar nada a lugar algum.
Converter um código de corCMYK é um tipo diferente de conversão
As três primeiras notações são descrições intercambiáveis da mesma coisa. O CMYK não é, e é aqui que a cor de fato se perde em vez de apenas ser reescrita. O RGB é aditivo: uma tela emite luz vermelha, verde e azul, e as três no máximo dão branco. O CMYK é subtrativo: as tintas ciano, magenta, amarela e preta absorvem luz do papel branco, e mais tinta significa mais escuro.
A consequência é que o conjunto de cores que a tinta consegue produzir é menor do que o que uma tela emite, e a diferença é maior exatamente onde os designers gostam de trabalhar. Azuis vívidos, verdes elétricos, laranjas quentes e tudo que é neon existem na tela e não têm equivalente em tinta. A conversão precisa substituir pela cor imprimível mais próxima, e no papel isso parece mais chapado do que o que você aprovou no monitor.
| Cor | Na tela | Impressa em CMYK |
|---|---|---|
Azul puro #0000FF | Elétrico, saturado | Nitidamente mais apagado e mais roxeado |
Verde vivo #00FF00 | Vibrante | Consideravelmente mais escuro e acinzentado |
| Tons neon e fluorescentes | Luminosos | Inalcançáveis sem uma cor especial |
| Preto denso para texto | Sólido | Tudo bem — mas use preto rico em áreas grandes |
| Tons de pele, terrosos e pastéis | Normais | Reproduzem muito bem |
Daí vêm dois hábitos práticos. Confira suas cores de marca principais no conversor de RGB para CMYK antes de assumi-las para qualquer coisa que será impressa, para descobrir um problema de gamute na fase de design e não na de prova. E para áreas pretas grandes, não use preto de uma chapa só: um preto rico com um pouco de ciano, magenta e amarelo evita o cinza lavado que o preto simples produz numa área extensa.
Tirar cores de uma imagem
Muitas vezes a cor que você quer já existe numa fotografia, numa captura do site de um concorrente ou num logotipo que alguém mandou como PNG sem nenhum manual de marca. O gerador de paletas tem um conta-gotas que lê o valor exato de qualquer pixel da imagem que você abrir; cole esse código no seletor de cor para ter as quatro notações de uma vez.
Duas cautelas ao pegar cor de fotografias. A compressão JPEG altera a cor de forma sutil, principalmente em bordas e áreas chapadas, então o pixel que você amostra pode ser um artefato de compressão em vez da cor verdadeira — amostre do meio de uma região chapada ampla, não perto de um limite. E uma fotografia carrega a iluminação em que foi feita, então um vermelho de marca fotografado sob luz quente de interior é amostrado como laranja. Para um logotipo, peça o arquivo vetorial ou o código hex real; a amostragem serve para quando não existe nada melhor.
Contraste e os números que importam
Qualquer que seja a notação, as escolhas de cor são limitadas pela legibilidade. As diretrizes de acessibilidade expressam isso como razão de contraste entre o texto e o fundo: pelo menos 4,5:1 para texto corrido normal e 3:1 para texto grande — cerca de 24 px, ou 19 px em negrito — e também para os limites visuais de controles como botões e campos de formulário.
Aqui o HSL só serve como guia aproximado, porque o cálculo se baseia na luminância relativa — o quanto uma cor parece clara de fato —, e não na luminosidade do HSL. Com a mesma luminosidade HSL, o amarelo é muito mais claro que o azul: #FFFF00 sobre #0000FF dá cerca de 8:1. E duas cores plenamente saturadas na mesma luminosidade — um vermelho puro e um verde puro a 50% — parecem violentamente diferentes, mas chegam só a cerca de 2,9:1, o que reprova até no mínimo de 3:1 e fica pior ainda para quem tem daltonismo vermelho-verde. Essa falha sozinha responde por boa parte das interfaces inacessíveis; conferir a razão real em vez de confiar numa diferença de matiz a evita.
Perguntas frequentes
Como converto um código hex para RGB?
Divida os seis dígitos em três pares e leia cada um como número na base 16, de 00 a FF, ou seja, de 0 a 255. Assim `#3B82F6` é vermelho 59, verde 130, azul 246. Um código de três dígitos como `#F60` é abreviação de `#FF6600`, com cada dígito duplicado, e um de oito dígitos acrescenta um quarto par para a transparência alfa.
HSL é melhor que RGB?
Para descrever uma cor a uma tela, são equivalentes: cada valor HSL corresponde exatamente a um valor RGB. Para tomar decisões de design, o HSL é bem melhor, porque separa matiz, saturação e luminosidade em botões independentes, de modo que tons mais escuros, variantes suaves e paletas combinando viram a mudança de um número em vez de um chute sobre três.
Por que minhas cores ficam diferentes quando impressas?
Telas emitem luz e impressoras a absorvem, e a tinta simplesmente não alcança algumas cores que uma tela produz — azuis vívidos, verdes brilhantes e qualquer coisa neon em especial. A conversão substitui pela cor imprimível mais próxima, o que se lê como mais apagado. Conferir as cores-chave em CMYK antes de assumi-las evita a surpresa na prova.
Que razão de contraste preciso para um texto legível?
Pelo menos 4,5:1 entre texto e fundo para texto corrido comum, e 3:1 para texto grande de cerca de 24 px ou 19 px em negrito, além dos limites de controles interativos. O que move esse número é a luminância relativa — o quanto cada cor parece clara de fato —, então duas cores com matizes diferentes mas brilho parecido vão falhar por mais distintas que pareçam. A luminosidade do HSL é só um guia aproximado: um vermelho puro e um verde puro têm os mesmos 50% de luminosidade e mesmo assim chegam só a cerca de 2,9:1.