🎨

gerador paleta cores

Gere belas paletas de cores a partir de uma cor base. Exporte como CSS, HEX ou JSON.

Ferramentas de design Executa localmente Nenhum dado enviado
paleta HSL complementar design
Cor base
Tipo de paleta
Quantidade (somente monocromático): 5
5
Formato de exportação
Pré-visualização da paleta
Exportar

O que é o gerador paleta cores?

Gere belas paletas de cores a partir de uma cor base. Escolha esquemas complementares, análogos, triádicos ou monocromáticos e exporte como CSS, HEX ou JSON.

Como usar o gerador paleta cores

  1. Escolha a cor base a partir da qual deseja criar.
  2. Escolha o estilo da paleta, como complementar, análoga ou monocromática.
  3. Revise as amostras geradas e ajuste a cor base, se necessário.
  4. Copie os valores HEX que deseja reutilizar no seu design system ou mockup.

Ferramentas relacionadas

🎨
seletor de cor
Converta cores entre HEX, RGB, HSL e CMYK
 🌈
gerador gradiente CSS
Crie gradientes lineares e radiais em CSS com pré-visualização ao vivo
 ⚖️
verificador contraste WCAG
Verifique as taxas de contraste de cores WCAG AA e AAA para acessibilidade
Entenda as paletas de cores ▾
Exemplo
Entrada Gerando uma paleta complementar a partir de uma cor azul base:
Saída A cor complementar fica diretamente oposta no círculo cromático, criando uma combinação vibrante de alto contraste.
Casos de uso comuns
  • Crie sistemas de cores de UI a partir de uma cor base da marca
  • Gere cores de destaque auxiliares para gráficos ou ilustrações
  • Explore direções de paleta antes de entregar ao design
  • Crie conjuntos de cores rápidos para posts em redes sociais ou slides
Perguntas frequentes
Como escolho o tipo de harmonia certo?

Use complementar para designs ousados e de alto contraste. Use análoga para temas de UI suaves e coesos. Use triádica quando precisar de três cores de destaque equilibradas. Use monocromática quando simplicidade e elegância forem prioridade.

A paleta verifica contraste para acessibilidade?

Esta ferramenta foca na geração de harmonia de cores. Para verificação de contraste WCAG, use as ferramentas Contrast Checker ou WCAG AA Checker deste site.

Posso exportar a paleta para Figma ou CSS?

Sim — use o formato de exportação CSS para obter propriedades personalizadas CSS prontas para colar, ou copie valores HEX individualmente para colar em qualquer ferramenta de design.

Para que serve o controle deslizante de contagem monocromática?

Ao usar o tipo Monocromático, você pode controlar quantas variações claras e escuras são geradas (3–10). Isso oferece uma escala de cinza ou tonalizada refinada para trabalhar.