Qual é a sua cor?
Escolha, ajuste e copie o código para usar no projeto.
Cores que combinam
Combinações calculadas a partir da sua cor. Toque em qualquer uma para copiar.
Escala de tons
A cor em nove níveis, do mais claro ao mais escuro — a escala que se usa em tema de site e de app.
Pronto para colar no código
Variáveis CSS com a escala completa.
Como usar essas combinações num site
A que combina fica do lado oposto no círculo de cores. É o contraste mais alto — serve para o botão de ação, o preço em destaque, o aviso que não pode passar batido.
As vizinhas ficam ao lado da sua cor. Combinam sem disputar atenção: boas para gráficos, categorias e estados que convivem na mesma tela.
Os tons da família são a base de qualquer tema. O claro vira fundo, o médio vira a cor da marca, o escuro vira texto e borda.
Regra prática: uma cor para a marca, uma neutra para quase tudo e uma só para a ação principal. Interface com três cores fortes disputando vira poluição — e derruba a conversão.
Cores de uma foto
Mande um logo, um print ou uma referência. O site separa as cores que estão na imagem.
Por que tirar a cor de uma foto
Serve para tirar a paleta de um logo, de uma foto de produto ou de uma referência que você gostou. Em vez de garimpar o código no olho, o site separa as cores que realmente estão ali — e você já sai com o HEX para colar no projeto.
A foto é lida dentro do próprio navegador e não é enviada para lugar nenhum.
Paletas prontas
Pontos de partida por tipo de projeto. Toque numa cor para copiar o código.
Escolhendo a cor de um projeto
Landing page vive de uma ação só. Escolha uma cor forte para o botão principal e não repita essa cor em mais nada — é ela que guia o olho até a conversão.
Painel e sistema pedem o contrário: base neutra e cor reservada para estado (verde para ok, âmbar para atenção, vermelho para erro). Quem passa oito horas na tela não aguenta cor saturada.
Loja precisa que o preço e o botão de comprar saltem da foto do produto. Fundo claro e neutro deixa a mercadoria ser a cor da página.
Portfólio pode ousar, porque a cor é parte do trabalho. Ainda assim, mantenha o texto legível: a pessoa veio ler o que você fez.
Modo escuro não é inverter. Cor saturada que funciona no branco costuma vibrar no fundo escuro — clareie e reduza a saturação em vez de só trocar o fundo.
Essa cor dá para ler?
Teste se o texto continua legível sobre o fundo escolhido. É o critério WCAG, o mesmo que auditoria de acessibilidade cobra.
O que esse teste mede
Ele compara o brilho das duas cores e calcula a razão entre elas. O padrão WCAG pede 4,5× para texto normal e 3× para texto grande ou negrito.
Na prática: reprovou, some no celular no sol e some para quem tem baixa visão. É também o item que mais aparece em auditoria de acessibilidade e no Lighthouse.