Códigos de Cores: HEX, RGB, HSL e CMYK

Para converter um código enquanto lê, use o conversor de cores: ele mostra a mesma cor em HEX, RGB, HSL, CMYK e outros formatos.

A Mesma Cor em Quatro Códigos

A tabela mostra cores conhecidas em cada formato, com os valores calculados pelo site. Cada linha é uma cor só, escrita de quatro jeitos.

HEX: O Código Hexadecimal

O código HEX é o mais usado em sites, em CSS e em programas de design. Ele tem seis caracteres depois do #: os dois primeiros dizem quanto vermelho a cor tem, os dois do meio, quanto verde, e os dois últimos, quanto azul. Cada par vai de 00 (nada) a FF (o máximo). Como cada canal tem 256 valores, o HEX descreve 256 × 256 × 256 = 16.777.216 cores.

Os números estão na base 16 (hexadecimal), que usa os algarismos de 0 a 9 e as letras de A a F, valendo de 10 a 15. Para ler um par, multiplique o primeiro caractere por 16 e some o segundo. No Azul Royal (#4169E1), por exemplo: 41 dá 4 × 16 + 1 = 65 de vermelho; 69 dá 6 × 16 + 9 = 105 de verde; E1 dá 14 × 16 + 1 = 225 de azul. Ou seja, RGB(65, 105, 225).

Há também a forma curta, com três caracteres, em que cada um se repete: #F00 é o mesmo que #FF0000. E a forma com oito caracteres, em que o último par é a transparência: #FF000080 é um vermelho com cerca de 50% de opacidade.

RGB: Vermelho, Verde e Azul

O RGB escreve os mesmos três canais em números de 0 a 255. É o jeito como a tela forma as cores: cada ponto da tela tem luzes vermelha, verde e azul, e a cor é a soma delas (o modelo aditivo). Com as três no máximo, RGB(255, 255, 255), sai o branco; com as três apagadas, o preto. No CSS, escreve-se rgb(65 105 225); a transparência entra depois de uma barra, como em rgb(65 105 225 / 50%).

HSL: Matiz, Saturação e Luminosidade

O HSL descreve a cor de um jeito mais próximo de como a gente pensa nela: o matiz é a posição na roda de cores, de 0° a 360° (0° é vermelho, 120° é verde, 240° é azul); a saturação vai do cinza (0%) à cor pura (100%); e a luminosidade vai do preto (0%) ao branco (100%), com a cor pura em 50%. Para criar variações de uma cor, é o formato mais prático: mudando só a luminosidade, a cor clareia ou escurece sem trocar de matiz. No CSS, hsl(225 73% 57%).

CMYK: A Cor na Impressão

O CMYK é o código das gráficas. Ele indica quanto de cada tinta vai no papel, em porcentagem: ciano (C), magenta (M), amarelo (Y) e preto (K). Na tinta, as cores se somam escurecendo, o modelo subtrativo, o contrário da luz da tela.

A conversão de RGB para CMYK é sempre uma aproximação. O resultado impresso depende do papel, da tinta e do perfil de cor usado pela gráfica, e algumas cores muito vivas da tela, como o verde e o azul puros, nem podem ser impressas com as quatro tintas. Por isso, para um material impresso importante, peça uma prova de cor à gráfica.

Outros Códigos

• Pantone: um sistema de cores com nome e número, usado em gráficas e na indústria para garantir a mesma cor em qualquer lugar. É um sistema próprio, de uma empresa, e não uma conversão matemática.
• RAL: um padrão de cores muito usado em tintas industriais, plásticos e fachadas. As fichas do site mostram o RAL mais próximo de cada cor, como referência.
• LAB: um espaço de cor feito para se aproximar da percepção humana, usado para medir a diferença entre duas cores. O site usa o LAB para achar a cor com nome mais parecida com qualquer código.

Qual Código Usar

• Sites e aplicativos: HEX, RGB ou HSL, que o CSS entende diretamente. O HEX é o mais comum em guias de marca.
• Impressão: CMYK, ou Pantone quando a cor precisa ser exata, como em logotipos.
• Tinta de parede: o código do catálogo do fabricante. Leve o HEX à loja como referência, mas confira a amostra na parede, sob a luz do ambiente.

Para descobrir o código de uma cor de uma foto ou de uma imagem, use o seletor de cores. Para ver todos os códigos de uma cor, abra a ficha dela: cada uma traz HEX, RGB, HSL, CMYK, LAB e outros formatos.