Extrair paleta de imagem
Solte uma foto ou logo e receba uma paleta de 5 a 8 cores dominantes, em hex, RGB e HSL, prontas pra copiar ou exportar pro CSS e pro Tailwind.
Como funciona
Solte ou escolha uma imagem e a paleta aparece na hora, sem precisar clicar em nenhum botão de "extrair". Por baixo, a ferramenta agrupa os pixels parecidos em grupos (a técnica se chama median cut) e tira a média de cada grupo, sempre do maior grupo pro menor. Isso é o que faz a primeira cor da lista ser a mais dominante da imagem, e não só a primeira que apareceu. Você escolhe entre 5 e 8 cores no controle acima da imagem, e mudar esse número refaz a paleta na hora, sem soltar a imagem de novo.
Cada cor vem em 3 formatos ao mesmo tempo: hexadecimal (o "#a1b2c3" que qualquer editor de CSS entende), RGB e HSL. Clique no retângulo grande da cor pra copiar o hex, ou nos botões menores embaixo pra copiar o RGB ou o HSL. Um aviso rápido de "copiado" confirma cada clique, e a ferramenta cuida de escrever o texto da cor sempre em preto ou branco, o que garante que dê pra ler em qualquer tom.
Além da paleta automática, a imagem inteira fica visível como um conta-gotas: toque ou clique em qualquer ponto dela pra pegar a cor exata daquele pixel, sem passar pela média de nenhum grupo. Cada cor escolhida assim entra numa lista separada, "suas cores", com os mesmos botões de copiar. É o jeito certo de pegar aquele tom específico do céu, da roupa ou da logomarca que a paleta geral não capturou sozinha.
Pra usar a paleta em código, tem 3 botões de exportar: copiar como variáveis CSS (prontas pra colar dentro de um `:root`), copiar como o objeto `colors` de uma config do Tailwind, ou baixar uma imagem PNG com as faixas de cor e o hex escrito em cada uma. Tudo isso acontece dentro do seu navegador: a imagem nunca sai do seu aparelho, não tem envio pra nenhum servidor, não pede login e não tem limite de uso.
Perguntas frequentes
Como as cores são escolhidas?
A ferramenta usa uma técnica chamada median cut: ela agrupa os pixels da imagem por semelhança de cor, indo do grupo maior pro menor, e cada cor final é a média daquele grupo. É por isso que a primeira cor da paleta costuma ser a que mais aparece na imagem, e as próximas vão diminuindo em dominância. Pixels bem transparentes (como o fundo de um PNG recortado) são ignorados, pra não sujar a paleta com uma cor que na prática não aparece.
Copia em hex ou RGB?
Nos dois, e também em HSL. Cada cor da paleta mostra os 3 formatos: clique no retângulo grande pra copiar o hex ("#a1b2c3"), ou nos botões menores pra copiar o RGB ("rgb(1, 2, 3)") ou o HSL ("hsl(210, 40%, 50%)"). Também dá pra copiar a paleta inteira já formatada como variáveis CSS ou como config do Tailwind, sem precisar copiar cor por cor.
Funciona com a foto da minha marca?
Funciona com qualquer imagem: logo, foto de produto, print de tela, foto pessoal. Como tudo roda no seu navegador, sem enviar a imagem pra nenhum servidor, dá pra usar até com uma logo ou foto que ainda não foi divulgada, sem preocupação de privacidade. O resultado sai pronto pra colar direto no CSS ou no Tailwind do seu site.