Gerador de paleta de cores
Crie paletas de cores a partir de regras de harmonia ou de uma foto. Veja tons, contraste e gradientes, e exporte para CSS, SCSS, Tailwind, JSON, Swift, Android ou Figma.
Carregando Gerador de paleta de cores…
Seus arquivos nunca saem do seu dispositivo
Como usar Gerador de paleta de cores
- 1
Abra Gerador de paleta de cores nesta página. Ele carrega direto no seu navegador.
- 2
Adicione seu arquivo, texto ou valores e ajuste as configurações.
- 3
Copie ou baixe o resultado. Nada é enviado nem armazenado.
Sobre esta ferramenta
Este gerador de paleta de cores cria combinações harmoniosas para sites, apps, marcas e ilustrações. Comece com uma cor base e uma regra de harmonia, ou envie uma foto e extraia as cores principais. Cada cor vem com seus tons, valores HEX, RGB e HSL e uma verificação de contraste, e a paleta inteira é exportada direto para o seu código ou ferramenta de design.
Como criar uma paleta
- Escolha uma cor base, ou envie uma imagem para extrair uma paleta.
- Escolha uma regra de harmonia (veja abaixo) ou comece com uma predefinição.
- Ajuste as cores e clique em qualquer cor ou tom para copiar o valor.
- Confira os resultados de contraste WCAG antes de usar cores em textos.
- Exporte a paleta no formato de que precisa.
Regras de harmonia de cores
- Complementar: duas cores opostas no círculo cromático, para um contraste forte.
- Análoga: cores vizinhas no círculo, calmas e naturais.
- Triádica: três cores igualmente espaçadas, vivas mas equilibradas.
- Tetrádica e dupla complementar dividida: quatro cores para esquemas ricos; deixe uma dominar.
- Complementar dividida: uma cor base mais as duas vizinhas da sua complementar, mais suave que a complementar.
- Monocromática: tons claros e escuros de uma só cor, elegante e segura.
- Personalizada: escolha cada cor você mesmo.
Formatos de exportação
Copie ou baixe a paleta como propriedades personalizadas CSS, variáveis SCSS, configuração de cores do Tailwind, JSON, Swift (iOS), cores XML do Android ou uma lista pronta para o Figma. O criador de gradientes gera gradientes lineares, radiais ou cônicos com suas cores e copia o CSS.
Dicas para uma paleta que funciona
- Use a regra 60/30/10: uma cor dominante para a maior parte do espaço, uma cor secundária e uma cor de destaque para botões e realces.
- Verifique o contraste do texto. O WCAG AA pede pelo menos 4,5:1 para texto normal, e o AAA 7:1.
- Inclua cores neutras. A maioria das interfaces precisa de uma escala de cinzas além das cores da marca.
- Teste no modo escuro se o seu produto tiver um; cores saturadas podem parecer brilhar em fundos escuros.
Precisa só de um gradiente? Experimente o gerador de gradiente CSS. Para verificar um par de cores em detalhe, use o verificador de contraste.
Perguntas frequentes
Posso criar uma paleta de cores a partir de uma imagem?
Sim. Envie uma foto e a ferramenta extrai as cores dominantes para uma paleta que você pode editar e exportar.
O que é harmonia de cores?
Uma regra para escolher cores que combinam bem com base na posição delas no círculo cromático, como complementar, análoga ou triádica.
Posso exportar a paleta para o Tailwind CSS?
Sim. Escolha a exportação Tailwind para obter uma configuração de cores que você cola no seu projeto. Também há formatos CSS, SCSS, JSON, Swift, Android e Figma.
Como saber se o texto ficará legível sobre uma cor?
A paleta mostra uma verificação de contraste WCAG. Busque pelo menos 4,5:1 para texto normal (AA) ou 7:1 para o nível mais rigoroso AAA.
Como copiar o código de uma cor?
Clique em qualquer cor ou tom e o valor é copiado. Os valores HEX, RGB e HSL aparecem para cada cor.
Posso criar um gradiente com a minha paleta?
Sim. O criador de gradientes gera gradientes lineares, radiais ou cônicos com suas cores e copia o CSS.