Extrator de Paleta de Cores

O que esta ferramenta faz

Designers “roubam” paletas do mundo o tempo todo — um pôr do sol, um cartaz, um still de filme, um screenshot do app de alguém. Esta ferramenta automatiza isso. Solte qualquer imagem e receba as cores dominantes como amostras, cada uma com HEX, RGB e HSL prontos para copiar com um clique. Escolha 4 amostras para uma paleta enxuta de marca, 6 para uma paleta de UI flexível, 8 para um conjunto de ilustração, ou 12 para capturar nuances em fotos. Além de copiar amostras individuais, você exporta a paleta inteira em três formatos: variáveis CSS prontas para o :root, um trecho de config Tailwind para tailwind.config.js e JSON com HEX/RGB/HSL para qualquer outra ferramenta. A imagem nunca sai do seu navegador. A redimensionamos em um canvas pequeno, amostramos cada pixel e agrupamos cores próximas — tudo localmente. Isso significa que você pode extrair paletas de mockups internos, ativos sob NDA ou fotos pessoais sem risco de privacidade. Sem upload, sem rastreamento, sem cópia temporária em servidor algum.

Como usar

1. Solte a imagem — Qualquer formato comum funciona — PNG, JPG, WebP, GIF. A paleta sai melhor com imagens de regiões de cor bem definidas; imagens muito ruidosas podem produzir amostras embaçadas.
2. Escolha a quantidade — 4 para uma paleta enxuta de marca. 6 é o ponto doce de UI. 8–12 capturam tons sutis, útil para referência de ilustração.
3. Copie amostras individuais — Clique em qualquer amostra para copiar o HEX para a área de transferência. O chip pisca “Copiado!” para confirmar.
4. Exporte a paleta inteira — Use os botões de baixo para copiar como variáveis CSS, objeto colors do Tailwind, ou JSON. Cole direto no projeto.

Como funciona a extração

Redimensionamos a imagem em um canvas 200×200 (amostrando a imagem inteira, não os cantos) e lemos cada pixel via getImageData. O RGB de cada pixel é arredondado para baixo ao múltiplo de 32 mais próximo, gerando 512 buckets possíveis (8×8×8). Os buckets são contados, ordenados por frequência, e percorremos a lista pegando as cores mais frequentes que não estejam próximas demais de uma já escolhida (distância euclidiana ≥ 38 no espaço RGB) para variar visualmente. A amostra exibida é a média RGB de todos os pixels do bucket, não o representante arredondado — o que dá cores um pouco mais precisas. Pixels totalmente ou quase transparentes são excluídos.

Escolhendo a quantidade certa

4 cores funciona para logos e identidades minimalistas — força hierarquia. 6 cores é onde a maioria dos design systems para: 1–2 de marca, 1 destaque, neutros. 8 cores dá acentos secundários e neutros intermediários. 12 cores serve para referência de ilustração e fotografia onde você quer capturar graduações sutis. Acima de 12 a paleta vira ruído difícil de usar como restrição de design.

Perguntas frequentes