Ferramenta online de gerador de paletas

Uma paleta compartilhada mantém consistência visual, acelera a entrega a desenvolvimento e evita hex escolhidos ao acaso.

Benefícios

• Consistência: Mesmos destaques em telas e suportes.
• Marca: Amostre fotos ou moodboards.
• Rapidez: Menos conta-gotas manual.
• Temas: Da imagem às variáveis claro/escuro.
• Inspiração: A foto sugere matizes inesperados.

A ferramenta lê cada pixel da sua imagem, o organiza numa grade de 262.144 células de cor e agrupa essas células no número de amostras que você pediu. Trabalhar a partir das células, e não dos pixels, é o que torna instantânea qualquer mudança de opção, mesmo numa foto de 48 megapixels.

Fluxo típico

• Carregue o arquivo: Comece com uma fonte nítida e bem iluminada para que as cores dominantes façam sentido.
• Leia os pixels: Cada pixel é contado, em resolução total, com os totalmente transparentes excluídos por padrão para que o fundo de um logotipo não vire uma amostra.
• Agrupe: Cores semelhantes são reunidas conforme o algoritmo e a ambiência escolhidos.
• Meça: Cada grupo reporta a cor média exata dos seus próprios pixels e quanto da imagem ele ocupa.
• Entregue: Copie os hex, exporte para formatos prontos para código e confira contraste e daltonismo antes de publicar.

A maioria dos extratores quantiza antes de reportar: arredonda cada canal para um intervalo e devolve o valor do intervalo, então uma imagem de #ff0000 puro sai como #fa0000 — uma cor que não está em lugar nenhum da foto. Para uma ferramenta cuja saída inteira é um código hex que você vai colar numa folha de estilos, isso é exatamente o trabalho feito errado.

• Agrupar é aproximado e rápido; reportar é exato. São duas etapas deliberadamente separadas.
• Cada amostra é a média aritmética dos pixels reais atribuídos a ela, acumulada com precisão total.
• Uma imagem de cor única devolve exatamente uma amostra com exatamente aquela cor.
• A participação sob cada amostra é uma contagem real de pixels, não uma estimativa: seis faixas iguais reportam 16,7% cada.
• A mesma imagem com as mesmas opções produz sempre a mesma paleta. Nada aqui usa semente aleatória.

Os três leem cada pixel e reportam cores exatas. Diferem no que otimizam, e o mais adequado depende do que você quer tirar da imagem.

• K-means: o padrão. Agrupa as cores para que as amostras fiquem o mais separadas possível perceptualmente, que é o que se espera de uma fotografia.
• Frequência: ancora cada amostra numa cor que realmente cobre bastante área. A resposta certa para “qual é a cor da marca neste logotipo”, onde uma média entre duas cores reais é justamente o contrário.
• Median cut: divide por população de pixels igual, então um pequeno acento vibrante ganha proporcionalmente mais espaço do que nos outros dois. O quantizador clássico, e o indicado para dithering.

Uma ambiência muda quais cores são escolhidas, nunca como uma cor escolhida é reportada. Ela pondera as próprias cores da imagem antes do agrupamento, de modo que a mesma fotografia rende paletas realmente diferentes e igualmente honestas.

• Neutra: apenas cobertura — as cores que ocupam a maior parte da imagem.
• Colorful: favorece a saturação em qualquer luminosidade, para a leitura mais viva da imagem.
• Bright: favorece cores que são ao mesmo tempo claras e saturadas.
• Muted: favorece meios-tons dessaturados, evitando o preto e o branco, as duas cores menos suaves que existem.
• Deep: favorece tons joia escuros e saturados.
• Dark: favorece tons de sombra em qualquer saturação.

Uma harmonia é uma rotação de matiz que mantém todo o resto fixo. Fazê-la em LCH e não em HSL importa mais do que parece: girar um azul 180 graus em HSL dá um amarelo com a mesma luminosidade nominal que é cerca de nove vezes mais brilhante aos olhos.

• Seis regras: complementar, análoga, triádica, complementar dividida, tetrádica e monocromática.
• O croma é preservado: uma base suave dá harmonias suaves e uma base viva dá harmonias vivas.
• Cores fora do gamut são mapeadas, não cortadas: o croma é reduzido até a cor caber, então o matiz que você pediu é o que você recebe.
• Cores quase neutras avisam: um cinza não tem matiz para girar, e a ferramenta mostra sua escala em vez de inventar um complemento.
• Escalas de tons claros e escuros: onze paradas perceptualmente uniformes por amostra, no formato 50–950 que todo framework CSS espera.

Uma paleta que fica bonita e não pode ser lida não está pronta. As duas verificações abaixo são gratuitas em todos os planos, porque uma verificação de acessibilidade atrás de um paywall é pior do que nenhuma.

• Contraste WCAG para cada par da paleta — todos, não uma amostra dos primeiros.
• Cada cor contra preto e branco, com o melhor dos dois indicado, para saber qual cor de texto um botão precisa.
• Resultados AA, AA grande e AAA rotulados por par.
• Protanopia, deuteranopia e tritanopia simuladas sobre a paleta inteira.
• Qualquer par que deixe de ser distinguível é nomeado com a diferença de cor medida ao lado.

A exportação é o produto — ninguém extrai uma paleta para olhar. CSS, JSON e uma lista hex simples são gratuitos; os formatos que levam uma paleta para outros programas fazem parte do Pro.

• CSS e SCSS: propriedades personalizadas e variáveis, cada uma anotada com o nome de cor mais próximo e sua participação na imagem.
• Tailwind: um bloco @theme, pronto para colar numa folha de estilos Tailwind v4.
• JSON: cada amostra com coordenadas RGB, Lab e LCH, sua participação e o nome de cor CSS mais próximo.
• ASE: Adobe Swatch Exchange, para Illustrator, InDesign e Photoshop.
• GPL: o formato de paleta do GIMP, lido também por Inkscape, Krita e Scribus.
• SVG e PNG: um cartão de amostras para compartilhar, quando a paleta vai para uma conversa em vez de um repositório.

Passos desde o carregamento até a exportação.

1. Adicione uma imagem. Arraste um arquivo para a página, cole da área de transferência (Ctrl+V ou ⌘V) ou clique em Procurar. A paleta aparece assim que a imagem é lida.
2. Escolha as opções. Selecione um algoritmo (frequência, K-means ou median cut), uma ambiência de cor e quantas cores quer — de três a oito no plano gratuito.
3. Refine. Use o conta-gotas para substituir qualquer amostra por uma cor retirada da imagem e confira a grade de contraste e o relatório de daltonismo antes de decidir.
4. Use ou exporte. Copie os valores hex, baixe CSS, SCSS ou JSON e revise as sugestões de harmonia e contraste antes de fechar um esquema.

Poucas cores núcleo e contraste cedo reduzem retrabalho.

Referências

• A maioria dos sistemas de interface fica em cerca de três a dez cores centrais para que estados e neutros continuem legíveis.
• A extração por frequência favorece cores que cobrem grandes áreas da foto, o que ajuda em imagens de destaque.
• Métodos de agrupamento revelam degradês sutis que uma única amostragem com conta-gotas perderia.
• Exportações em CSS ou JSON encaixam direto em design tokens e bibliotecas de componentes.
• Uma foto de 12 megapixels é lida por completo em bem menos de um segundo, e mudar uma opção depois custa uma fração disso porque os pixels não são lidos de novo.

Boas práticas

Use o resultado como base e refine com marca e acessibilidade.

• Use referências de alta resolução sem artefatos fortes de compressão para médias mais limpas.
• Aumente o número de cores quando a cena tiver muitos materiais distintos; reduza em layouts minimalistas.
• Salve as exportações e um README curto com os nomes dos tokens para a equipe saber como importar.
• Pré-visualize texto e ícones sobre fundos reais, não apenas amostras isoladas.
• Use o conta-gotas quando a resposta automática chegar perto mas você quiser exatamente o pixel que tinha em mente.

Casos de uso

• Web: Páginas a partir de fotos de cliente.
• Marca: Cores de campanhas ou embalagem.
• Espaços: Inspiração para materiais.
• Moda: Moodboards sazonais.
• Arte: Estudar distribuição de cor.

• Seletor de cor
• Hex para RGB
• RGB para Hex
• Analisador de imagens
• Correção de cor
• Comprimir imagem
• Todos os conversores