Seletor de Cores
A ferramenta de cores completa para quem cria: escolha uma cor no seletor visual (ou com o conta-gotas direto da tela), veja o código em HEX, RGB, HSL e CMYK com um clique para copiar, gere harmonias prontas (complementar, análogas, triádica e mais), monte uma escala de 10 tons a partir de qualquer cor e confira na hora se o contraste passa nos critérios de acessibilidade. Dá até para enviar uma imagem e extrair as cores dominantes dela.
Cor base
Formatos
Harmonias
Clique para usar como cor base · clique no código para copiar
Complementar
Análogas
Triádica
Split-complementar
Tetrádica
Escala de tons
Clique em qualquer tom para copiá-lo.
Contraste e legibilidade
Texto de exemplo
Texto de exemplo
Paleta a partir de imagem
Todos os formatos, sem conversor separado
Escolheu a cor, ganhou o código: HEX para o dia a dia, RGB e HSL para estilos, CMYK como referência para impressão. Cada formato tem seu botão de copiar, e o campo de entrada aceita qualquer um deles — cole "rgb(255, 51, 102)" ou "hsl(340, 100%, 60%)" e a ferramenta entende.
Harmonias e escala de tons
A partir da cor base, a ferramenta gera cinco esquemas de harmonia usados em design: complementar, análogas, triádica, split-complementar e tetrádica — clique em qualquer cor do esquema para torná-la a nova base.
A escala de tons cria 10 variações da sua cor, do tom mais claro (50) ao mais escuro (900), no padrão usado pelos sistemas de design modernos. Perfeita para montar a paleta de um site ou app.
Contraste e acessibilidade
Veja a taxa de contraste da sua cor sobre fundo branco e preto, com os selos AA e AAA dos critérios internacionais de acessibilidade (WCAG). Assim você sabe antes de publicar se aquele texto vai ser legível para todo mundo.
Como usar
Clique no quadrado colorido para abrir o seletor visual, digite um código no campo ao lado ou use o conta-gotas para capturar qualquer cor da tela. Os formatos, harmonias, escala e contraste atualizam na hora. Para extrair uma paleta, envie uma imagem na última seção — as seis cores dominantes aparecem prontas para copiar ou usar como base.
Perguntas frequentes
A ferramenta converte entre HEX, RGB e HSL?
Sim, automaticamente. Escolha ou cole a cor em qualquer formato e os demais aparecem juntos, cada um com botão de copiar.
O que significam os selos AA e AAA?
São os níveis dos critérios internacionais de acessibilidade (WCAG) para contraste de texto: AA exige taxa de 4,5:1 e AAA, de 7:1. Quanto maior, mais legível o texto para todos.
Como funciona o conta-gotas?
Ele captura a cor de qualquer ponto da tela, inclusive fora da página. Está disponível nos navegadores mais recentes de computador; se o botão não aparecer, seu navegador ainda não oferece esse recurso.
Minha imagem é enviada para algum servidor ao extrair a paleta?
Não. A análise acontece inteiramente no seu dispositivo e a imagem nunca sai dele.