Cores no CSS: HEX, RGB e HSL, qual usar? (com tabela)

No CSS, uma mesma cor pode ser escrita de quatro jeitos: por nome, em HEX, em RGB ou em HSL. O resultado na tela é idêntico, mas cada formato tem seu ponto forte. Neste guia você aprende como cada um funciona, como converter entre eles e qual escolher em cada situação.

Para consultar valores prontos enquanto lê, use a nossa tabela de cores HTML, com as 148 cores com nome e os códigos HEX, RGB e HSL de cada uma.

Os quatro formatos de cor no CSS

Veja a mesma cor, o azul dodgerblue, escrita das quatro formas:

color: dodgerblue;
color: #1E90FF;
color: rgb(30 144 255);
color: hsl(210 100% 56%);

Cor em HEX (hexadecimal)

O HEX é o formato mais comum e o que ferramentas de design costumam entregar. Ele começa com # seguido de seis dígitos hexadecimais, em três pares: vermelho, verde e azul. Cada par vai de 00 (nenhuma luz) a FF (intensidade máxima).

#RRGGBB
#1E90FF   /* 1E = 30, 90 = 144, FF = 255 */

• Forma curta: quando cada par tem dois dígitos iguais, dá para abreviar. #FFAA00 vira #FA0.
• Com transparência: um oitavo e nono dígito definem o alfa. #1E90FF80 é a mesma cor com cerca de 50% de opacidade.

Precisa passar um HEX para RGB ou HSL? Cole o código no conversor de cores, ou veja o conversor hexadecimal se quiser entender a conta por trás dos pares.

Cor em RGB

O RGB descreve a cor pela quantidade de vermelho, verde e azul, cada uma de 0 a 255. É a mesma informação do HEX, só que em decimal.

color: rgb(30 144 255);
color: rgb(30, 144, 255);          /* sintaxe antiga, com vírgulas */
color: rgb(30 144 255 / 50%);      /* com transparência */
color: rgba(30, 144, 255, 0.5);    /* forma antiga com alfa */

Na sintaxe moderna, o rgb() já aceita transparência, então o rgba() só aparece em código antigo. As duas formas funcionam nos navegadores atuais.

Cor em HSL

O HSL descreve a cor como as pessoas a imaginam: matiz (H, de 0 a 360 graus no círculo de cores), saturação (S, de 0% a 100%) e luminosidade (L, de 0% a 100%).

• Matiz: 0 é vermelho, 120 é verde, 240 é azul.
• Saturação: 0% é cinza, 100% é a cor viva.
• Luminosidade: 0% é preto, 50% é a cor pura, 100% é branco.

A grande vantagem é poder criar variações sem calcular nada: para escurecer um botão no hover, basta diminuir o L.

.btn        { background: hsl(210 100% 56%); }
.btn:hover  { background: hsl(210 100% 46%); }   /* mais escura */
.btn:active { background: hsl(210 100% 40%); }

Comparação rápida

Cores com nome

O CSS reconhece 148 nomes de cor, como red, tomato, rebeccapurple e lightseagreen. São práticos para testar algo rápido, mas não cobrem a paleta de uma marca. Consulte a lista completa, com os códigos de cada uma, na tabela de cores HTML.

Qual formato usar?

• Veio do designer ou do Figma: use HEX. É o que você vai receber e copiar.
• Vai criar tema claro e escuro, hover e variações: use HSL, porque ajustar luminosidade é direto.
• Vai calcular a cor com JavaScript: use RGB, mais fácil de manipular.
• Não precisa decidir sempre: o navegador trata todos igual. O importante é manter um padrão no projeto.

Use variáveis CSS para as cores do site

Em vez de repetir o código da cor em dezenas de lugares, guarde-a em uma variável. Trocar a paleta depois passa a ser mudar uma linha.

:root {
  --cor-primaria: hsl(210 100% 56%);
  --cor-texto: #1b2540;
  --cor-fundo: #f4f6fb;
}

.botao {
  background: var(--cor-primaria);
  color: white;
}

Contraste e acessibilidade

Uma cor bonita não adianta se o texto não é legível. A norma de acessibilidade WCAG pede uma razão de contraste de pelo menos 4,5:1 para texto comum e 3:1 para texto grande (a partir de 24 px, ou 18,66 px em negrito). Antes de fixar o par de cores de um botão, teste-o no verificador de contraste da nossa tabela de cores.

Se precisar de ideias de combinação, o gerador de paleta de cores sugere cores que combinam entre si, e o gerador de gradiente CSS monta o código de degradês prontos para colar.

Perguntas frequentes

HEX e RGB são a mesma coisa?

Descrevem a mesma cor com a mesma informação. O HEX escreve os três canais em base 16 e o RGB os escreve em decimal, de 0 a 255.

Como converter HEX para RGB?

Separe os seis dígitos em três pares e converta cada um de hexadecimal para decimal. Em #1E90FF: 1E = 30, 90 = 144 e FF = 255, ou seja, rgb(30 144 255). Para fazer isso automaticamente, use o conversor de cores.

Preciso escrever o símbolo # no HEX?

Sim, no CSS e no HTML o código HEX começa com #. Sem ele, o navegador ignora a declaração.

Qual formato é melhor para desempenho?

Nenhum. O navegador converte todos para o mesmo valor interno, então a escolha é só de organização e legibilidade do código.

Como deixar uma cor transparente?

Acrescente o alfa: rgb(30 144 255 / 50%), hsl(210 100% 56% / 0.5) ou os dois últimos dígitos do HEX, como #1E90FF80. Para a página inteira, a propriedade opacity também funciona, mas afeta tudo dentro do elemento, inclusive o texto.