polyshExtrator de paleta de cores
Tire de qualquer imagem uma paleta de cores pronta para usar, com códigos HEX.
- Roda no seu navegador
- Sem uploads
- Sem conta
Carregando a ferramenta no navegador…
O que faz: Extrator de paleta de cores
Em vez de escolher cores um pixel por vez, o extrator agrupa todos os pixels da imagem no número de cores que você escolher, de 3 a 12, e as lista da mais comum para a menos comum. Cada cartão mostra o código HEX, os valores RGB e a porcentagem da imagem que a cor ocupa.
Dois botões de cópia facilitam reaproveitar o resultado: Copiar todos os HEX gera uma lista separada por vírgulas, e Copiar como CSS gera as variáveis --color-1 a --color-n dentro de um bloco :root. Ative Ignorar branco, preto e cinza para pular fundos de página e texto, para que as cores de destaque apareçam. A mesma imagem sempre gera a mesma paleta.
Exemplo
Você escolhe
Uma imagem de 1000 × 200 px com quatro faixas de cor chapada: #3157D5 (40%), #ED6C50 (30%), #2BAE84 (20%), #16181D (10%) Número de cores: 4
Copiar como CSS gera
:root {
--color-1: #3157D5;
--color-2: #ED6C50;
--color-3: #2BAE84;
--color-4: #16181D;
}Com quatro cores chapadas e quatro espaços, cada faixa vira uma amostra, ordenada pela participação de cerca de 40%, 30%, 20% e 10%.
Como usar: Extrator de paleta de cores
- Clique em Escolher arquivo ou cole a imagem.
- Defina o Número de cores e ative Ignorar branco, preto e cinza em capturas de tela de interfaces.
- Clique em Copiar todos os HEX, Copiar como CSS ou Copiar em uma única cor.
Bom saber
- As cores da paleta são médias de grupos de pixels, então uma cor pode não existir exatamente na imagem. Use o Seletor de cores para capturas de tela para um pixel exato.
- Detalhes pequenos, como um link fino na cor da marca, podem ser absorvidos por um grupo maior. Aumente o Número de cores para separá-los.
- Pixels transparentes ou quase transparentes são ignorados, então o fundo de um logo não aparece na paleta dele.
Perguntas sobre Extrator de paleta de cores
Como tiro uma paleta de cores de uma imagem?
Carregue a imagem e a paleta aparece abaixo dela, ordenada pela parte da imagem que cada cor ocupa. Mude o Número de cores para ter mais ou menos amostras e copie os códigos HEX ou as variáveis CSS.
Quantas cores uma paleta deve ter?
Cinco ou seis é o comum em uma paleta de interface ou de marca: um fundo, uma superfície, texto, uma cor principal e um ou dois destaques. Use de 8 a 12 em fotos ou ilustrações em que você quer a gama completa.
Por que minha paleta mostra quase só branco e cinza?
Capturas de tela de apps são, na maior parte, fundo e texto. Ative Ignorar branco, preto e cinza para pular pixels quase brancos, quase pretos e cinzas, para que as cores da marca e de destaque subam para o topo.