Códigos de cor: HEX, RGB e HSL explicados

Por · Atualizado em

Um código de cor é uma forma numérica de descrever uma cor para que computadores, navegadores e programas de design exibam exatamente o mesmo tom. Os três formatos mais usados na web são o HEX (#FF5733), o RGB (rgb(255 87 51)) e o HSL (hsl(11 100% 60%)). Os três exemplos descrevem a mesma cor, um laranja-avermelhado vivo: só muda a maneira de escrever.

Na prática, HEX e RGB dizem quanto de vermelho, verde e azul a tela deve acender, enquanto o HSL descreve a cor como as pessoas pensam nela: qual é o matiz, quão viva e quão clara ela é. Neste guia você aprende a ler cada formato, a converter de um para o outro à mão e a escolher o mais adequado para CSS, design de interfaces e identidade visual.

O que é um código de cor e para que serve

Toda tela moderna forma as cores com pequenos pontos de luz vermelha, verde e azul. Um código de cor é a instrução que diz a intensidade de cada um desses três canais. Como a instrução é numérica, ela não depende de interpretação: o designer que escolhe #4169E1 no Figma, o desenvolvedor que escreve esse valor no CSS e o navegador que o exibe estão falando do mesmo azul royal.

Por trás dos códigos existe um espaço de cor, que define qual vermelho, qual verde e qual azul correspondem ao valor máximo de cada canal. Na web, o padrão é o sRGB: sempre que você escreve um HEX, um rgb() ou um hsl() sem indicar outro espaço, o navegador interpreta a cor como sRGB. É por isso que um mesmo código pode parecer um pouco diferente em dois monitores: o número é igual, mas a calibração e a capacidade de cada tela variam.

Com 8 bits por canal, cada componente vai de 0 a 255, o que dá 256 × 256 × 256 = 16.777.216 combinações. É desse cálculo que vem a expressão “16,7 milhões de cores”.

Como ler um código HEX

O HEX (de hexadecimal) é o formato mais comum em CSS, manuais de marca e ferramentas de design. Ele começa com # e usa seis dígitos que vão de 0 a 9 e de A a F. Os seis dígitos formam três pares:

Cada par é um número em base 16. O dígito da esquerda vale 16 vezes o seu valor, e o da direita vale o próprio valor, com A = 10, B = 11, C = 12, D = 13, E = 14 e F = 15. Assim, 00 é 0 (canal apagado) e FF é 15 × 16 + 15 = 255 (canal no máximo). Alguns exemplos:

Letras maiúsculas e minúsculas são equivalentes: #ff5733 e #FF5733 são a mesma cor.

Notação curta: #RGB

Quando cada par é formado por dois dígitos iguais, dá para abreviar o código para três dígitos. O navegador duplica cada um: #F80 vira #FF8800 , e #FFF vira #FFFFFF. Um código como #FF5733 não tem versão curta, porque 57 não é um par de dígitos repetidos.

Transparência: #RRGGBBAA e #RGBA

O CSS aceita um quarto par para o canal alfa (a opacidade). 00 é totalmente transparente e FF é totalmente opaco. Em #FF573380, o par 80 vale 128, e 128 ÷ 255 ≈ 50,2% de opacidade. A versão curta de quatro dígitos segue a mesma lógica: #F538 equivale a #FF553388. Alguns programas de design mais antigos não reconhecem o alfa em HEX; nesses casos, use rgb() com alfa.

Como funciona o código RGB

O RGB escreve os mesmos três canais do HEX, só que em números decimais de 0 a 255. No CSS atual, a sintaxe recomendada separa os valores por espaços:

.destaque { color: rgb(255 87 51); }
.sobreposicao { background: rgb(0 0 0 / 60%); }
.selo { background: rgb(255 87 51 / 0.5); }

A barra / introduz o alfa, que pode ser escrito em porcentagem (50%) ou em decimal (0.5). A sintaxe antiga, com vírgulas, rgb(255, 87, 51) e rgba(255, 87, 51, 0.5), continua funcionando em todos os navegadores. Hoje rgba() é apenas um apelido de rgb(), que já aceita o alfa.

O RGB é um modelo aditivo: somar luz clareia. Com os três canais no máximo, você tem branco; com os três em zero, preto. Vermelho com verde gera amarelo (rgb(255 255 0)). Essa diferença entre luz e pigmento é o assunto do guia RGB x CMYK.

HSL: matiz, saturação e luminosidade

O HSL descreve a cor com três propriedades que fazem sentido para o olho humano:

No CSS, a sintaxe moderna também usa espaços: hsl(11 100% 60%) ou, com transparência, hsl(11 100% 60% / 50%). A grande vantagem é poder ajustar uma cor mudando um único número. Mantendo o matiz 11° e a saturação 100%, basta variar a luminosidade para criar uma escala:

Com HEX, a mesma escala exigiria recalcular os três pares a cada passo. É por isso que o HSL é tão usado para montar variações de uma paleta de cores.

HSL não é o mesmo que HSV (ou HSB)

Photoshop e vários seletores de cor mostram HSB ou HSV (Hue, Saturation, Brightness/Value). O matiz é o mesmo, mas a escala vertical muda: no HSB, brilho 100% com saturação 100% dá a cor pura, enquanto no HSL a cor pura fica em luminosidade 50%. Por isso, não copie os números de um modelo para o outro. O CSS não tem função hsv(): converta para HSL, RGB ou HEX antes de levar a cor para o código.

Como converter entre HEX, RGB e HSL

Um conversor de cores faz tudo isso na hora, mas entender a conta ajuda a conferir valores e a identificar erros de digitação.

HEX para RGB

Separe os pares e converta cada um para decimal (dígito da esquerda × 16 + dígito da direita). Para #FF5733:

FF → 15 × 16 + 15 = 255
57 →  5 × 16 +  7 =  87
33 →  3 × 16 +  3 =  51
#FF5733 = rgb(255 87 51)

RGB para HEX

Faça o caminho inverso: divida cada valor por 16. O quociente inteiro é o primeiro dígito e o resto é o segundo. Para o azul royal, rgb(65 105 225):

 65 ÷ 16 =  4, resto 1 → 41
105 ÷ 16 =  6, resto 9 → 69
225 ÷ 16 = 14, resto 1 → E1
rgb(65 105 225) = #4169E1

RGB para HSL

A fórmula padrão trabalha com os canais em escala de 0 a 1. Veja o passo a passo com rgb(255 87 51):

  1. Divida cada canal por 255: R = 1, G ≈ 0,341, B = 0,2.
  2. Encontre o maior (máx = 1) e o menor (mín = 0,2) valor. A diferença é d = 0,8.
  3. Luminosidade: L = (máx + mín) ÷ 2 = 0,6 → 60%.
  4. Saturação: se d = 0, a cor é cinza e S = 0. Caso contrário, S = d ÷ (1 − |2L − 1|) = 0,8 ÷ 0,8 = 1 → 100%.
  5. Matiz: depende de qual canal é o maior. Se for R, H = 60 × ((G − B) ÷ d), somando 360 se o resultado for negativo; se for G, H = 60 × ((B − R) ÷ d + 2); se for B, H = 60 × ((R − G) ÷ d + 4). Aqui o maior é R: H = 60 × (0,141 ÷ 0,8) ≈ 10,6 → 11°.

Resultado: hsl(11 100% 60%). Repare no arredondamento: o matiz exato é 10,6°, e se você converter hsl(11 100% 60%) de volta obtém #FF5833, uma unidade de diferença no verde. É imperceptível, mas explica por que ida e volta entre formatos nem sempre devolve o HEX original. Quando a fidelidade importa, como na cor de uma marca, guarde o HEX ou o RGB como valor de referência.

Qual formato usar: tabela comparativa

FormatoExemploPontos fortesMelhor uso
HEX#FF5733Compacto, fácil de copiar e colar, aceito em praticamente qualquer ferramentaManuais de marca, handoff de design, cores fixas no CSS
HEX com alfa#FF573380Transparência sem mudar de formatoSombras e sobreposições quando o projeto já usa HEX
RGBrgb(255 87 51)Valores decimais legíveis, alfa claro com /Transparências, manipulação de cor em JavaScript, canvas
HSLhsl(11 100% 60%)Ajuste intuitivo de claro/escuro e de intensidadeEscalas de tons, estados de botão, temas e variáveis CSS
Nome CSStomatoLegível em protótiposTestes rápidos e exemplos didáticos

Uma combinação comum em projetos reais: guardar as cores da marca em HEX, declará-las como variáveis CSS e usar rgb() ou hsl() quando for preciso transparência ou uma variação de luminosidade.

Outros formatos que você vai encontrar

Nomes de cor do CSS

O CSS define mais de 140 nomes de cor, como navy, teal e tomato. Cada nome corresponde a um HEX fixo: navy é #000080 (azul-marinho) e teal é #008080 (verde-azulado). São práticos em testes, mas limitados para uma identidade própria.

CMYK

O CMYK (ciano, magenta, amarelo e preto) é o modelo da impressão, não da tela. Existe uma conversão matemática simples, que dá #FF5733 ≈ cmyk(0%, 66%, 80%, 0%), mas o resultado real na gráfica depende do perfil de cor, do papel e da máquina. O CSS não usa CMYK para exibir cores na tela.

OKLCH e outros espaços modernos

O CSS Color Level 4 trouxe funções como oklch(), lab() e color(), que alcançam cores fora do sRGB em telas de gamut amplo e têm uma luminosidade mais fiel à percepção humana. Em HSL, um amarelo e um azul com a mesma luminosidade de 50% parecem ter claridades bem diferentes; em OKLCH, isso é corrigido. O guia cores no CSS moderno explica esses formatos em detalhe.

Erros comuns com códigos de cor

Resumo e próximos passos

HEX, RGB e HSL são três formas de escrever a mesma informação. O HEX é compacto e universal, o RGB mostra os canais em decimais e lida bem com transparência, e o HSL facilita criar variações de uma cor.

Para colocar isso em prática:

Ferramentas usadas neste guia