Precisa encontrar o código hexadecimal de uma cor para colar no CSS, no Canva ou no Figma? Este seletor de cores hexadecimais resolve: clique na amostra, escolha o tom e o código aparece, junto com os valores em RGB e HSL. Um exemplo bem nosso: o verde e o amarelo da bandeira costumam ser usados em sites e camisas como #009C3B e #FFDF00, e o azul como #002776. Cole qualquer um deles no campo HEX e veja a cor na hora. É o caminho mais curto entre "quero esse verde" e um código que qualquer programa entende.
O que é uma cor hexadecimal?
Uma cor hex é um código de seis caracteres que diz à tela exatamente qual cor desenhar. Ela tem a cara de #FF6B6B ou #1A73E8: um sinal de cerquilha seguido de seis dígitos hexadecimais. "Hex" é abreviação de "hexadecimal", ou seja, contagem em base 16: os dígitos de 0 a 9 e depois as letras de A a F para os valores de 10 a 15.
Esses seis dígitos são, na verdade, três pares. O primeiro par define o vermelho, o segundo o verde, o terceiro o azul. Cada par vai de 00 (nada daquela cor) a FF (o máximo, que é 255 em decimal). Multiplique 256 valores possíveis de vermelho por 256 de verde por 256 de azul e você tem 16.777.216 cores diferentes: cada tom que o seu monitor consegue mostrar, codificado em sete caracteres.
É por isso que o hex venceu. O RGB precisa de vírgulas e parênteses (rgb(255, 107, 107)). O HSL precisa de sinais de porcentagem e graus. O hex cabe direitinho no CSS, na barra lateral do Figma, numa mensagem de WhatsApp, num post-it. É o aperto de mão universal da cor digital.
Como usar o seletor de cores hex
O seletor tem duas entradas. Use a que combina com o que você já tem.
- Clique na amostra de cor para abrir o seletor de cores nativo do seu navegador. Arraste pelo degradê, clique no tom que quer e o código hex aparece logo abaixo.
- Digite ou cole um código hex no campo HEX. Os valores mudam assim que você termina um código válido (três ou seis dígitos depois da cerquilha, que é obrigatória neste campo).
Assim que você define a cor, a ferramenta mostra três coisas ao mesmo tempo: o código hex, o equivalente em RGB e o equivalente em HSL. Selecione e copie o formato que o seu destino pede. O CSS aceita os três; algumas ferramentas de design preferem um deles.
Nada sai do seu navegador. O seletor roda em JavaScript na sua máquina, por isso é instantâneo e por isso as suas escolhas de cor ficam com você, o que é útil se você está tirando cores de marca de um layout confidencial.
Lendo um código hex (exemplo resolvido)
Pegue o vermelho coral usado em muito design de interface moderno: #FF6B6B. Separe em pares:
- FF = canal vermelho = 255 (o máximo: vermelho total)
- 6B = canal verde = 107 (uma quantidade moderada de verde)
- 6B = canal azul = 107 (a mesma quantidade moderada de azul)
Verde e azul iguais com vermelho total dão um vermelho clareado, puxando para o rosa. É o visual coral. Em RGB fica rgb(255, 107, 107); em HSL fica hsl(0, 100%, 71%), que se lê como "matiz vermelho puro, saturação total, mais claro que o meio".
Como 6B virou 107? Os dígitos hex usam base 16, então o dígito da esquerda é a casa das dezesseis e o da direita é a casa das unidades. 6 são seis dezesseis (96). B são onze unidades. Some e dá 107. A mesma lógica vale para todo par: FF são quinze dezesseis (240) mais quinze unidades (15), ou seja, 255.
O truque da forma curta. Quando os três pares têm dígitos repetidos (#FF0000, #33CC99, #000000), dá para escrever o hex com três caracteres em vez de seis. #F00 quer dizer #FF0000 (vermelho puro). #FFF quer dizer #FFFFFF (branco). #000 quer dizer #000000 (preto). O navegador expande cada dígito duplicando-o. A forma curta só funciona quando cada par tem dígitos iguais, então #FF6B6B não pode ser encurtado.
Quando você lê um código hex de relance, olhar um arquivo CSS vira leitura, não decifração. #1A73E8? Pouco vermelho, verde médio e azul quase no máximo: o azul do Google. #34A853? Pouco vermelho, bastante verde, azul médio: o verde do Google.
Códigos hex que vale decorar
Você não precisa saber todos os tons, mas uma pequena paleta mental de códigos clássicos economiza tempo. A maioria dos sites modernos é construída sobre um punhado de tons de design system, e Tailwind, Material Design e Bootstrap chegam a números parecidos.
| Cor | Hex | RGB | Onde você vai ver |
|---|---|---|---|
| Branco puro | #FFFFFF | 255, 255, 255 | Fundo de página padrão |
| Preto puro | #000000 | 0, 0, 0 | Texto de títulos, fundo de modo escuro |
| Tailwind gray-500 | #6B7280 | 107, 114, 128 | Texto corrido no modo claro |
| Tailwind blue-500 | #3B82F6 | 59, 130, 246 | Link padrão / botão principal |
| Material red-500 | #F44336 | 244, 67, 54 | Estados de erro, ações destrutivas |
| Material green-500 | #4CAF50 | 76, 175, 80 | Mensagens de sucesso, confirmações |
| Roxo do Slack | #4A154B | 74, 21, 75 | Ícone e cabeçalho do Slack |
| Preto do GitHub | #24292F | 36, 41, 47 | Texto corrido do GitHub |
| Roxo da Stripe | #635BFF | 99, 91, 255 | Marca e botões da Stripe |
O padrão que salta aos olhos: cores de marca não são aleatórias. Elas se concentram em tons médios e saturados, porque essas cores continuam legíveis tanto sobre fundo branco quanto sobre fundo escuro. Se você está escolhendo uma cor de marca, teste-a nos dois fundos antes de fechar.
Contraste e acessibilidade
Duas cores que parecem ótimas no monitor do escritório podem ficar ilegíveis para alguém com daltonismo leve, no celular, debaixo de sol forte. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) colocam um número nisso: a razão de contraste.
A razão compara a luminância relativa de duas cores, ou seja, o quanto cada uma parece clara para um olho típico. Uma razão de 1:1 significa cores idênticas (invisível). A razão máxima é 21:1, preto puro sobre branco puro. A WCAG define dois níveis:
- AA (o mínimo): 4,5:1 para texto normal. 3:1 para texto grande (18 pt ou mais, ou 14 pt ou mais em negrito).
- AAA (a meta melhor): 7:1 para texto normal. 4,5:1 para texto grande.
Algumas referências práticas: preto sobre branco dá 21:1. O cinza #6B7280 sobre branco dá 4,83:1, passando raspando no AA. O cinza #9CA3AF sobre branco dá 2,54:1, reprovado no AA para texto corrido, então só deve ser usado em dicas ou estados desativados. O azul #3B82F6 sobre branco dá 3,68:1, aprovado no AA para texto grande e reprovado para texto pequeno. O contraste é o mesmo nos dois sentidos: texto branco sobre um botão desse azul também dá 3,68:1, e é por isso que muitos design systems usam um azul mais escuro (como #2563EB) atrás de texto branco.
Se você está escolhendo cores de marca no seletor, anote os códigos e passe-os por um verificador de contraste antes de fechar. O seletor mostra a cor sozinha; o contraste só importa quando você junta duas.
Hex vs. RGB vs. HSL
As três notações descrevem o mesmo conjunto de 16,7 milhões de cores. A diferença está no que cada uma facilita.
- Hex é compacto e fácil de copiar. Ótimo para guardar, compartilhar e escrever no CSS. Péssimo para ajustar: ir de
#FF6B6Bpara uma versão um pouco mais escura exige fazer conta em hexadecimal de cabeça. - RGB é a verdade por baixo: três números de 0 a 255. Útil quando você precisa fazer contas de cor num script (tirar a média de duas cores, misturar em direção a um alvo). É o hex, só que mais cansativo de ler.
- HSL separa matiz (a cor em si), saturação (o quanto é viva) e luminosidade (o quanto está perto do branco ou do preto). É a notação em que designers realmente pensam. Quer um tom mais escuro da mesma cor? Baixe a luminosidade de 71% para 50%. Quer uma versão mais apagada? Baixe a saturação. O HSL é o formato para ajustar uma paleta, não para escolher um tom só.
A maior parte do CSS moderno usa hex para cores fixas e as notações hsl() ou oklch() para tokens de design que precisam variar. O seletor mostra hex, RGB e HSL lado a lado, para você levar o formato certo ao lugar certo.
Ferramentas de cor relacionadas
O seletor de cores hex é uma porta de entrada para uma pequena família de ferramentas de cor, cada uma focada numa etapa do trabalho:
- Conversor de Hex para RGB: conversão direta quando você tem um hex e só precisa do RGB (sem o seletor nem o HSL).
- Conversor de Cores: traduz entre hex, RGB, HSL, HSV, CMYK e nomes de cor num lugar só.
- Localizador de Nome de Cor: dê um hex e receba o nome de cor CSS mais próximo (útil quando você prefere escrever
tomatoa#FF6347). - Gerador de Paleta de Cores: monta uma paleta coordenada de cinco cores a partir de um hex inicial. A próxima parada depois do seletor se você está criando uma marca.
- Gerador de Degradê: junta dois ou mais códigos hex num degradê CSS linear ou radial, com código para copiar.
Perguntas frequentes
O que significa o símbolo # num código hex?
É um aviso para o CSS (e para a maioria das ferramentas de design) de que o que vem depois é uma cor hexadecimal, não um número comum ou um identificador. Algumas ferramentas aceitam o código sem a cerquilha, mas inclua sempre ao escrever CSS: color: #FF6B6B está certo, color: FF6B6B é inválido.
Códigos hex diferenciam maiúsculas de minúsculas?
Não. #FF6B6B, #ff6b6b e #Ff6B6b produzem a mesma cor. Ferramentas de CSS costumam padronizar em minúsculas. Alguns guias de estilo preferem maiúsculas pela legibilidade. Tanto faz: escolha um e mantenha dentro do mesmo projeto.
Qual a diferença entre #F00 e #FF0000?
Nenhuma na tela: são a mesma cor (vermelho puro). A versão de três dígitos é uma forma curta que o navegador expande dobrando cada dígito: F vira FF, 0 vira 00. A forma curta só funciona quando cada canal tem dígitos iguais: #FFAA00 pode virar #FA0, e #FFEE00 pode virar #FE0. Já #FE6B6B não pode ser encurtado, porque nenhum dos pares repete o dígito.
Códigos hex podem ter transparência?
Sim: códigos hex de oito dígitos acrescentam um canal alfa (transparência). #FF6B6B80 é o mesmo vermelho coral com 50% de opacidade (80 em hex é 128 em decimal, mais ou menos metade de 255). Os dois últimos dígitos vão de 00 (totalmente transparente) a FF (totalmente opaco). Navegadores antigos não aceitam hex de oito dígitos; use rgba() se precisar dar suporte ao IE 11. Este seletor trabalha com códigos de três ou seis dígitos.
Por que algumas cores não ficam iguais na tela e no papel impresso?
Telas e impressoras usam sistemas de cor diferentes. A tela emite luz (RGB: vermelho, verde e azul somados). A impressora absorve luz (CMYK: ciano, magenta, amarelo e preto, misturados por subtração). Muitas cores vivas de tela, como verdes neon e azuis elétricos, ficam fora da gama CMYK e não podem ser reproduzidas com tinta. Se você precisa de cor perfeita na gráfica, desenhe primeiro em CMYK e confira o hex depois, não o contrário.
Como escolher uma cor de texto acessível para um fundo?
Pegue o hex do fundo e teste as cores de texto contra ele usando a razão de contraste. Texto branco sobre #6B7280 dá 4,83:1, que passa no AA da WCAG. Texto branco sobre #9CA3AF dá só 2,54:1, reprovado. Uma regra de bolso: se o hex do fundo não tem nenhum dígito acima de 8, texto branco costuma funcionar; se todos os dígitos são A ou mais, troque para texto escuro. Na dúvida, meça.
Qual a diferença entre hex e OKLCH?
Hex é um código posicional para um trio RGB específico: diz à tela exatamente o que mostrar. OKLCH é uma notação mais nova, construída em torno de como as pessoas percebem a cor: a escala de luminosidade é perceptualmente uniforme, então ajustar um valor OKLCH dá mudanças visuais previsíveis. O hex é universal e funciona em todo lugar. O OKLCH funciona em todos os navegadores modernos (Chrome 111+, Safari 15.4+, Firefox 113+) e está virando a notação preferida para tokens de design, porque facilita muito gerar escalas de cor acessíveis. A maioria das equipes ainda usa hex para as cores fixas da marca e OKLCH para paletas sistemáticas.