Seletor de cores
Escolha uma cor, copie o código HEX e veja contraste com texto claro ou escuro e uma paleta sugerida.
As cores são calculadas inteiramente no seu navegador e nada é salvo. Útil para site, CSS, apresentação e Canva.
Experimente outra ferramenta
Escolhidas para acompanhar estaSeletor de cores gratuito: escolha uma cor no seletor ou digite um código HEX, e a ferramenta mostra o código pronto para copiar, indica se texto claro ou escuro fica mais legível sobre aquele fundo, com os valores de contraste, e sugere uma paleta com tons mais claros, mais escuros, a cor complementar e um fundo suave. Tudo é calculado no navegador e nada fica salvo.
Como usar esta ferramenta
- 01Escolha a corUse o seletor visual ou cole um código HEX como #3B82F6. Formatos curtos como #0F0 também funcionam.
- 02Veja o contrasteA ferramenta indica se texto claro ou escuro lê melhor sobre essa cor, com os números de contraste.
- 03Aproveite a paletaClique em qualquer tom sugerido para torná-lo a nova cor base e continuar explorando.
Quando isso é útil?
- Definir a cor de um botãoVer o contraste junto já responde se o texto do botão deve ser branco ou escuro.
- Pegar o código de uma cor da marcaCom o HEX em mãos, a mesma cor se repete no site, no slide e no material impresso.
- Montar variações de um tomOs tons mais claros e mais escuros servem para estados de hover, borda e fundo.
Exemplos
- #1ED4C5Um turquesa claro: texto escuro lê melhor sobre ele do que texto branco.
- #0F172AUm azul quase preto: aqui o texto claro é o que funciona, com contraste folgado.
- #FFD400Amarelo forte é o caso clássico em que texto branco falha e muita gente usa mesmo assim.
Dicas para um resultado melhor
- Contraste 4,5:1 é a referênciaÉ o mínimo recomendado pelas diretrizes de acessibilidade para texto de tamanho normal.
- HEX curto é atalho, não outra cor#0F0 é exatamente o mesmo que #00FF00: cada dígito é duplicado.
Como ler o código HEX
Um código como #3B82F6 são três pares hexadecimais: 3B de vermelho, 82 de verde e F6 de azul, cada um de 00 a FF, ou seja, de 0 a 255. Quanto maior o valor, mais daquele componente. #000000 é preto, #FFFFFF é branco, e quando os três pares são iguais a cor é um cinza neutro. A forma curta de três dígitos duplica cada um: #0F0 equivale a #00FF00. Saber isso ajuda a ajustar uma cor na mão sem voltar ao seletor.
Contraste e legibilidade
O número de contraste compara o brilho de duas cores e vai de 1:1, quando são idênticas, a 21:1, entre preto e branco puros. As diretrizes de acessibilidade WCAG pedem pelo menos 4,5:1 para texto normal e 3:1 para texto grande. A ferramenta mostra o contraste da cor escolhida contra branco e contra preto, e indica qual das duas lê melhor — é a decisão que mais aparece na prática ao definir a cor de um botão ou de um bloco de destaque. Para comparar duas cores específicas, o verificador de contraste faz essa conta diretamente.
De onde vem a paleta sugerida
Os tons mais claros e mais escuros são a mesma cor com a luminosidade alterada, o que os torna adequados para estados de interface — hover, borda, fundo de destaque — porque mantêm a identidade do tom. A cor complementar é a que fica no lado oposto do círculo cromático e serve como acento, usada em pequena quantidade. O fundo suave é uma versão bem clara e dessaturada, pensada para áreas grandes onde a cor cheia cansaria. Para explorar harmonias mais elaboradas, o gerador de paleta trabalha com tríade, tétrade e análogas.
Perguntas frequentes
O que significa o código HEX?
São três pares hexadecimais para vermelho, verde e azul, cada um de 00 a FF. #3B82F6 é 3B de vermelho, 82 de verde e F6 de azul.
Qual contraste é considerado suficiente?
As diretrizes WCAG pedem no mínimo 4,5:1 para texto normal e 3:1 para texto grande.
Posso usar HEX de três dígitos?
Pode. #0F0 é atalho para #00FF00: cada dígito é duplicado.
A ferramenta pega cor de uma imagem?
Não. Ela trabalha com a cor que você escolher no seletor ou digitar como código HEX.
As cores ficam salvas?
Não. Tudo é calculado no seu navegador e nada é armazenado ou enviado.