Gerador de Paleta de Cores

O que este gerador faz

Sorteia uma paleta de cinco cores que você realmente consegue usar — não o caos que sai de um RGB totalmente aleatório. Cerca de dois terços das vezes ele puxa de um banco curado de seeds testados por designers, e o resto monta de forma algorítmica usando regras de harmonia (análoga, triádica, complementar dividida, tetrádica, complementar com neutros) com faixas de saturação e luminosidade ajustadas para cada estilo. Escolha um estilo — quente, frio, pastel, vibrante, terroso, monocromático ou automático — para enviesar a saída. Trave qualquer cor para mantê-la entre os re-rolls; os slots destravados são substituídos a cada nova rodada.

Como usar o gerador

Escolha um estilo (ou deixe em Automático para uma mistura). Clique em Gerar ou aperte Espaço para sortear uma nova paleta. Clique em qualquer código hex para copiá-lo. Clique no cadeado de uma cor que você quer manter e sorteie de novo para trocar as outras. Use Copiar CSS para pegar um bloco :root de propriedades customizadas pronto para colar, ou Copiar JSON para um array de hex que cabe em qualquer config ou export de design tokens.

O que faz uma paleta parecer intencional

Cinco cores é o ponto certo — variedade para primária / secundária / acento / neutro claro / neutro escuro, sem que nenhuma se perca. Dentro dessas cinco, planeje hierarquia: uma cor dominante leva 60% do layout, uma secundária 30%, e as outras três dividem 10%. O estilo Automático é ótimo para ideação; Terroso e Pastel funcionam para marcas editoriais e de bem-estar; Vibrante para produtos infantis, games e landing pages com muito CTA; Monocromático quando você quer uma rampa de uma cor só.

Quando cada estilo funciona

Automático — melhor mistura entre seeds curados e esquemas algorítmicos; ponto de partida certo se você ainda não sabe o que quer. Quente — paletas de pôr do sol, marcas de comida, campanhas de energia. Frio — fintech, SaaS, qualquer coisa que precisa parecer calma e confiável. Pastel — produtos infantis, marcas de beleza, heros suaves. Vibrante — games, música, qualquer coisa que precisa chamar atenção. Terroso — outdoor, sustentabilidade, agricultura, imobiliário. Monocromático — editorial minimalista, sistemas de marca de uma cor, design acessível.

Perguntas frequentes

Por que as cores não parecem totalmente aleatórias?

Porque RGB aleatório puro fica horrível — matizes que brigam, meios-tons sujos, sem hierarquia. Cerca de dois terços das paletas vêm de um banco curado de seeds aprovados por designers (com pequeno jitter de matiz para você não ver as mesmas cinco cores duas vezes seguidas). O outro terço é montado com regras de harmonia e faixas de saturação/luminosidade que foram testadas. O resultado ainda parece aleatório, mas toda rodada é algo que você poderia publicar.

Posso travar uma cor e re-sortear o resto?

Sim. Clique no cadeado de qualquer cor para congelá-la. Cores travadas são mantidas entre re-rolls; os slots destravados ganham cores novas. É o fluxo que a maioria dos designers usa: deixe a cor da marca travada e re-sorteie as outras quatro até bater algo legal.

As paletas são acessíveis (WCAG)?

Não automaticamente — a maioria das paletas sorteadas tem pelo menos um par que reprova WCAG quando usado como texto sobre fundo. Use o resultado como ponto de partida e cheque combinações específicas de texto/fundo com nossa ferramenta de Verificador de Contraste. Se a paleta é para imagens de marketing (sem texto), tem mais flexibilidade.

Como exporto para minha ferramenta de design?

Copiar CSS gera um bloco :root { --color-1: #...; } pronto para colar num stylesheet. Copiar JSON gera um array de strings hex — útil para plugins de Figma, JSON de design tokens, ou qualquer config. Para Tailwind, cole o JSON no tailwind.config.js em theme.extend.colors.

O que o "Monocromático" gera de fato?

Cinco tons da mesma matiz — mesmo H, mesma S, com L variando de 0,92 (bem clara) a 0,18 (bem escura). O resultado é uma rampa monocromática completa, ideal para um sistema de marca de uma cor ou uma paleta de superfícies neutras. Trave a cor do meio na cor da sua marca e re-sorteie para variar a saturação mantendo a forma da rampa.

Algo é enviado a um servidor?

Não. O banco de seeds, a matemática de harmonia e as ações de copiar rodam no seu navegador. Abra DevTools → Aba Rede e re-sorteie — nenhuma requisição é feita. Sorteie paletas para produtos não lançados sem vazar nada.

Gerador de Paleta de Cores