Gerador de paleta de cores
Extraia as cores principais de uma imagem como uma paleta e copie em códigos HEX, variáveis CSS ou JSON.
O Gerador de paleta de cores encontra as cores dominantes de uma foto ou design e as mostra como amostras. Você pode escolher 3, 4, 5, 6 ou 8 cores; elas são ordenadas a partir da cor que ocupa a maior área, e tons muito parecidos são unidos para que cada amostra seja diferente. Copie a paleta como variáveis CSS ou uma lista JSON, ou baixe uma folha de amostras em PNG.
Como usar: Gerador de paleta de cores
- 1
Abra uma imagem
Arraste, escolha ou cole uma foto, ilustração, logo ou captura de tela.
- 2
Escolha o número de cores
Clique em 3, 4, 5, 6 ou 8. As amostras mudam na hora.
- 3
Copie cores individuais
Clique no ícone de copiar de uma amostra para copiar o código HEX.
- 4
Exporte a paleta
Use Copiar variáveis CSS ou Copiar JSON, ou baixe a paleta como uma folha de amostras em PNG.
O que faz
- Ordenada por área
- A primeira amostra é a cor que ocupa a maior parte da imagem.
- Tons distintos
- Cores quase idênticas são unidas, então a paleta não repete o mesmo tom.
- Pronta para desenvolvedores
- Exporte como propriedades personalizadas de CSS (--color-1, --color-2 e assim por diante) ou como uma lista JSON de códigos HEX.
- Folha de amostras em PNG
- Baixe uma imagem da paleta com o código HEX de cada cor escrito embaixo da amostra.
Perguntas
Como as cores da paleta são escolhidas?
A imagem é analisada em tamanho pequeno, cores parecidas são agrupadas e os grupos que ocupam a maior área aparecem primeiro. Pixels transparentes são ignorados.
Por que recebi menos cores do que escolhi?
Tons muito próximos são unidos para que cada amostra seja claramente diferente. Uma imagem com poucas cores distintas pode gerar menos amostras.
Como usar a paleta no CSS?
Clique em Copiar variáveis CSS para receber um bloco :root com variáveis chamadas --color-1, --color-2 e assim por diante, e cole na sua folha de estilos.
Por que uma pequena cor de destaque não aparece?
A paleta favorece cores que ocupam uma área maior, então um detalhe pequeno, como um logo pequeno, pode não aparecer. Use o Seletor de cores da imagem para pegar o valor exato de um ponto específico.