Seletor de cores

Como usar o seletor de cores

1. Escolha uma cor na caixa de cor, que abre o seletor do próprio aparelho, ou cole um código no campo de texto: HEX com ou sem # (3, 4, 6 ou 8 dígitos), rgb() e rgba(), hsl() e hsla() com vírgulas ou espaços, uma lista simples como 31, 78, 121 ou qualquer um dos 148 nomes de cor do CSS (em inglês, como teal ou tomato).
2. Pegue a cor de uma imagem: carregue, arraste ou cole uma foto, um logotipo ou uma captura de tela e clique ou toque no ponto que você quer; uma lupa mostra os pixels em volta. No Chrome, no Edge e no Opera de computador, Pegar cor da tela funciona como conta-gotas em qualquer pixel da tela.
3. Copie o formato de que precisa. Cada amostra da paleta copia o seu código HEX quando você toca nela.

A imagem é lida no seu aparelho e nunca é enviada.

Os formatos de cor

HEX é o RGB escrito em base 16, o sistema hexadecimal: cada par de dígitos é um canal de 00 a ff (0 a 255), então 1f = 1 × 16 + 15 = 31. Um sétimo e um oitavo dígito acrescentam transparência (alfa), e #abc é a forma curta de #aabbcc.

HSL e HSV partem do mesmo matiz, o ângulo no círculo cromático (0° vermelho, 120° verde, 240° azul), com R, G e B convertidos para a escala de 0 a 1. A luminosidade é L = (máx + mín) / 2 e a saturação HSL é (máx − mín) / (1 − |2L − 1|). No HSV, o valor é simplesmente V = máx e a saturação é (máx − mín) / máx. Por isso um vermelho puro é hsl(0, 100%, 50%), mas hsv(0, 100%, 100%).

CMYK, aqui, é a conversão de livro-texto: K = 1 − máx; depois C = (1 − R − K) / (1 − K), e o mesmo para M e Y. As gráficas convertem com perfis ICC próprios para o papel e a tinta, então os números delas vão ser diferentes; use este como ponto de partida.

O nome CSS mais próximo sai da conversão das duas cores para o espaço CIELAB e da menor distância em linha reta entre elas (ΔE, CIE76); um ΔE de cerca de 2,3 costuma ser citado como a menor diferença que as pessoas percebem.

Exemplo: #1f4e79

O azul-marinho padrão se divide em 1f, 4e e 79, ou seja, RGB 31, 78, 121. O azul é o maior canal (121 / 255 = 0,475) e o vermelho, o menor (0,122); então V = 47%, a saturação HSV = (121 − 31) / 121 = 74%, a luminosidade = (0,475 + 0,122) / 2 = 30% e a saturação HSL = 59%. O matiz dá 208,7°, mostrado como 209. A luminância relativa é 0,0712, e por isso o contraste com texto branco chega a 8,66:1 (AAA), mas com preto fica em só 2,42:1. A cor com nome mais próxima é steelblue, a um ΔE de 21 — o nome é só uma descrição aproximada.

Contraste e acessibilidade (WCAG 2.2)

A verificação de contraste segue as definições das Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.2, do W3C. Cada canal é linearizado (c / 12,92 até 0,04045; acima disso, ((c + 0,055) / 1,055)^2,4), a luminância relativa é L = 0,2126 R + 0,7152 G + 0,0722 B e a razão de contraste é (L_{mais clara} + 0,05) / (L_{mais escura} + 0,05), de 1:1 a 21:1.

Texto grande quer dizer pelo menos 18 pontos (24 pixels CSS) ou 14 pontos em negrito (cerca de 18,7 pixels). As razões são cortadas, não arredondadas, na segunda casa decimal — 4,499:1 nunca aparece como aprovado —, e uma cor translúcida é primeiro misturada com o branco ou o preto com que é comparada.

No Brasil, a Lei Brasileira de Inclusão (Lei 13.146/2015, art. 63) torna obrigatória a acessibilidade nos sites de empresas com sede ou representação comercial no país e de órgãos de governo, e o eMAG, o modelo de acessibilidade do governo federal, segue as recomendações do WCAG. Conferir o contraste das cores é um dos passos mais simples para cumprir isso.

Tons claros, escuros e harmonias

Os tons claros misturam a cor com branco em passos de 20%, e os escuros misturam com preto — uma escala pronta para estados de hover, bordas e fundos. As harmonias mantêm a saturação e a luminosidade e giram o matiz: a complementar fica a 180°, as análogas a 30° de cada lado, a tríade usa cores a 120° umas das outras e a complementar dividida usa 150° e 210°.

Dicas

• O mesmo código HEX pode parecer diferente em duas telas (brilho, modo noturno, telas de gama ampla), mas os números continuam os mesmos.
• Fotos raramente têm uma cor chapada: marque Média de 5 × 5 pixels ou compare alguns pontos.
• Precisa da imagem em outro formato ou tamanho? Use o conversor de imagens ou o redimensionador de imagens; para textos estilizados, as letras diferentes; para etiquetas, o gerador de código de barras.

Perguntas frequentes

Última atualização: 15 de outubro de 2026