Gerador de Paleta de Cores

Gerador de Paleta de Cores - Criar Esquemas de Cores Bonitos

Um poderoso gerador de paleta de cores com dois modos: criação manual com regras de harmonia de cores (monocromático, análogo, complementar, triádico, tetrádico) e extração automática de imagens usando quantização avançada de cores. Recursos incluem 12 paletas predefinidas, múltiplos formatos de exportação (CSS, SCSS, JSON, Array) e a capacidade de baixar paletas como imagens. Perfeito para designers, desenvolvedores e qualquer pessoa trabalhando com cores. Veja também nosso Gerador de Gradiente e nosso Misturador de Cores.

Como gero rapidamente uma paleta para um novo projeto?

Comece com a cor em que você já confia — geralmente uma primária de marca, um destaque de imagem hero ou a sensação que quer transmitir. Cole o HEX no seletor de cor base e clique em um botão de harmonia: Análoga gera um esquema calmo e de baixo conflito (bom para sites de conteúdo); Complementar gera contraste de alta energia entre duas cores (bom para CTAs); Triádica distribui três acentos equilibrados (bom para layouts editoriais). Se não tiver cor inicial, solte uma imagem de inspiração no modo De Imagem e deixe o agrupamento k-means extrair cinco cores dominantes. Refine cada amostra à mão e exporte. Uma paleta sólida de primeiro rascunho leva menos de dois minutos, e você sempre pode sobrepor Tons e Matizes para expandi-la em uma rampa completa de design system.

Qual a diferença entre harmonias monocromática, análoga, complementar, triádica e tetrádica?

São cinco posições clássicas no círculo cromático HSL. Monocromática mantém um único matiz variando apenas luminosidade e saturação — a mais calma e difícil de errar. Análoga escolhe vizinhos em cerca de 30 graus (azul, azul-verde, verde) — natural e coesa. Complementar escolhe o matiz oposto a 180 graus (azul mais laranja) — tensão visual máxima, ideal para um acento contra um fundo. Triádica escolhe três matizes a 120 graus (vermelho, amarelo, azul) — equilibrada mas vivaz, comum em marcas lúdicas. Tetrádica escolhe dois pares complementares formando um retângulo no círculo — a mais rica e mais difícil de controlar; geralmente uma cor domina enquanto as outras três fazem papel de apoio. Escolha a regra conforme o volume emocional da página.

Como funciona de fato a extração de cores de uma imagem?

Ao enviar a imagem, a ferramenta reduz a um número gerenciável de pixels e roda agrupamento k-means no espaço RGB. Cada pixel é tratado como ponto 3D; o algoritmo escolhe k centroides aleatórios (k é sua quantidade de cores), atribui cada pixel ao centroide mais próximo, recalcula cada centroide como média dos pixels atribuídos e repete até os centroides estabilizarem. O resultado são k cores que minimizam a distância total a todos os pixels — efetivamente os tons mais representativos da foto. Aceita JPEG, PNG, WebP, BMP e GIF até 10MB localmente; nada é enviado a um servidor. Para trabalho de marca, teste logos, fotos de produto e moodboards; o algoritmo naturalmente extrai cores dominantes, não pixels raros de destaque.

Como exporto a paleta para Figma, Adobe XD ou meu projeto de código?

Use o formato certo para cada destino. Para Figma e Adobe XD, copie a lista HEX e cole amostras uma por uma, ou exporte JSON e importe via plugin de sincronização de tokens como Tokens Studio. Para CSS puro, use Variáveis CSS — produz :root { --color-1: #...; } que você referencia como var(--color-1), permitindo sobrescrever temas em uma linha. Para pipelines Sass/SCSS, Variáveis SCSS geram $color-1: #...; compiladas em build. Para apps JavaScript (React, Vue, configuração Tailwind), use Array ou JSON e alimente seu objeto de tema. Para apresentações de cliente, baixe o PNG da paleta. Sempre renomeie --color-1 para nomes semânticos como --brand-primary ou --surface-elevated antes de produção.

Quantas cores uma paleta de design system realmente precisa?

Um design system funcional precisa de mais que as cinco ou seis amostras que uma harmonia gera. O padrão comum é: uma primária de marca mais 9 matizes/tons dela (paradas 50, 100, 200 ... 900); uma ou duas secundárias de marca com a mesma rampa; uma rampa neutra cinza de 9-12 paradas para texto, bordas e superfícies; mais cinco cores semânticas (verde sucesso, amarelo aviso, vermelho perigo, azul info, anel de foco) cada uma com par claro/escuro. Isso dá cerca de 50-70 tokens. Use este gerador para fixar os cinco matizes base e depois use Tons e Matizes para expandir cada base na rampa completa. Material Design, Tailwind e Radix seguem versões dessa estrutura.

Como verifico se minha paleta atende ao contraste WCAG?

Uma paleta bonita é inútil se o usuário não consegue ler o texto. Após exportar, pegue cada par primeiro plano/fundo que pretende usar (corpo sobre superfície, link sobre fundo, rótulo sobre botão) e rode em um verificador de contraste WCAG. Mire em razão mínima de 4.5:1 para texto corpo e 3:1 para texto grande (18pt ou 14pt negrito) para atender WCAG 2.1 AA; 7:1 e 4.5:1 respectivamente para AAA. Tons médios costumam falhar — um ciano vibrante parece ótimo mas raramente passa contra branco. Corrija escurecendo o primeiro plano ou combinando a cor de marca apenas com branco ou quase preto. O Verificador de Contraste deste site automatiza o cálculo.

Como ajusto uma harmonia que sai berrante demais ou apagada demais?

Harmonias brutas do círculo cromático costumam produzir resultados saturados caricaturalmente porque mantêm a saturação e luminosidade base em todas as amostras. A correção é converter cada amostra para HSL e ajustar individualmente. Para acalmar uma paleta berrante: reduza a saturação das cores de apoio para 30-50% mantendo saturada a cor de marca; esse é o princípio dominante-com-mudos por trás de quase toda paleta premium. Para acordar uma apagada: empurre contraste de luminosidade — coloque uma amostra perto de 95% (superfície quase branca) e outra perto de 15% (texto quase preto). A regra 60-30-10 é o padrão comprovado: 60% neutro dominante, 30% secundário, 10% acento. Use a ferramenta para gerar a matemática e ajuste HSL manualmente a gosto.

Por que as cores extraídas da minha imagem parecem mais apagadas que a foto original?

Duas coisas estão acontecendo. Primeiro, k-means retorna a média de cada cluster, e a média de um destaque saturado mais um tom médio escuro é sempre um tom menos saturado — fazer média dessatura por definição. Segundo, fotos dependem muito de microcontraste e transições gradientes que você perde ao reduzir milhares de pixels a cinco amostras planas. Correção: re-extraia com contagem maior (10 em vez de 5) e você recuperará os acentos brilhantes que estavam sendo mediados. Depois apague manualmente as cores médias barrentas e mantenha só os destaques saturados e a sombra mais escura. Alternativamente, amostre diretamente com o conta-gotas no pixel mais vivo em vez de confiar em médias de cluster — útil quando você quer uma cor de brilho específica, não uma média.

Recursos Principais

• Dois modos de geração: Manual e De Imagem
• Extraia cores dominantes de imagens
• 8 métodos de geração de harmonia de cores
• Geração de paleta monocromática
• Esquemas de cores análogos
• Pares de cores complementares
• Harmonias triádicas e tetrádicas
• Gere tons e matizes
• Gerador de paleta aleatória
• Algoritmo de agrupamento K-means para extração de imagem
• Adicionar/remover cores (2-10 cores)
• 12 belas paletas predefinidas
• Visualização de cores ao vivo com nomes
• Clique em cores para copiar códigos hex
• Embaralhar e inverter paleta
• Exportar para Variáveis CSS
• Exportar para Variáveis SCSS
• Exportar para formato JSON
• Exportar para Array JavaScript
• Baixar paleta como imagem PNG
• Upload de imagem com arrastar e soltar
• Suporte para JPEG, PNG, WebP, BMP, GIF
• Contagem de cores ajustável (3-10)
• Design responsivo para mobile
• Suporte a modo escuro
• Processamento 100% do lado do cliente
• Nenhum dado enviado para servidores