Extrator de Paleta de Cores de Imagem grátis

Exemplo prático

Clique em “Testar um exemplo” sob a área de soltar. O chip do arquivo mostra sample-image.png, e o controle deslizante mostra “Número de cores (6)”. O exemplo é um degradê de verde-azulado, azul-céu e violeta, com uma fileira de círculos pastel e a palavra LibraTool, então a maioria das amostras é azul. Em nosso teste, a lista começou com #189AE3 a 38.5%, #0D9CB6 a 28.7% e #4C69EB a 26.1%, seguidas de três pequenas com 3.1%, 2.2% e 1.4%. A primeira amostra mostra rgb(24, 154, 227) · hsl(202, 81%, 49%) · 38.5%, e a linha de contraste dá 6.8:1 para texto preto e 3.1:1 para texto branco. Arraste o controle para 2 e você obtém #238DD7 a 92.9% e #ADC0CA a 7.1%. De volta ao 6, escolha CSS em “Exportar como” e clique em “Copiar código” para obter um bloco :root que começa com --color-1: #189ae3. “Baixar faixa PNG” salva sample-image_palette.png. Seus códigos hex podem diferir em alguns passos, porque os navegadores desenham o texto do exemplo de forma ligeiramente diferente.

Quais configurações usar e os limites

• Adicione a imagem do jeito mais rápido. Solte um arquivo na área, clique em “Procurar arquivos” ou cole uma captura de tela com Ctrl+V. Em telas sensíveis ao toque, as dicas de soltar e colar ficam ocultas e “Procurar arquivos” é o caminho. Aceita JPEG, PNG, WebP e GIF, e uma foto HEIC do iPhone é convertida antes, com a mensagem “Convertendo sua foto do iPhone…”. “Ou cole a URL de um arquivo” busca a imagem a partir de um endereço, o que só funciona se esse site permitir. Colar de novo enquanto uma imagem está aberta a substitui. “Testar um exemplo” carrega uma imagem de teste de 1200 × 800.
• Defina o “Número de cores” com o controle deslizante. O controle vai de 2 a 16 e começa em 6, e o rótulo mostra a quantidade, como em “Número de cores (6)”. Quantidades baixas dão a paleta geral, e quantidades maiores captam pequenos destaques. Você pode ver menos amostras do que o controle indica, porque cores que arredondam para o mesmo hex são unidas e grupos vazios são descartados. A mesma imagem e a mesma quantidade sempre dão a mesma paleta, pois a busca parte de uma semente fixa. Cada amostra mostra sua participação na imagem, como 38.5%, e a maior participação vem primeiro.
• Lembre-se de que as amostras são médias. A imagem é reduzida para no máximo 200 px no lado maior, os pixels quase transparentes (alfa abaixo de 128) são ignorados e os demais são agrupados por distância em RGB por até 20 rodadas. Cada amostra é a média de um grupo. Isso significa que ela pode não aparecer exatamente em nenhum lugar da sua imagem, e um destaque fino pode ser diluído em um grupo vizinho. Quando precisar de uma cor exata, clique na imagem em vez de confiar em uma amostra.
• Clique na imagem para pegar um pixel exato. Sob a imagem aparece “Clique na imagem para amostrar uma cor de pixel”. Cada clique lê um pixel da imagem em tamanho real, não da cópia reduzida, mesmo quando a prévia é menor que o original ou tem margens vazias. As cores escolhidas aparecem como chips com o código hex. Clique em um chip para copiá-lo, ou clique no × para removê-lo. Uma cor que você já escolheu não é adicionada duas vezes, apenas as 12 mais recentes são mantidas, e cliques na margem não fazem nada. As cores escolhidas são independentes das amostras e não fazem parte das exportações.
• Use a linha de contraste para escolher a cor do texto. Sob cada amostra, a linha de contraste dá a razão para texto preto e para texto branco sobre aquela cor, com uma casa decimal. As razões usam a fórmula de luminância relativa da WCAG. O Gerador de paleta de cores do site classifica 4.5:1 como AA, então trate esse valor como um mínimo para texto corrido. No exemplo, #4C69EB obtém 4.5:1 com preto e 4.6:1 com branco, então nenhum dos dois é confortável, enquanto #DAEFFB obtém 17.7:1 com preto.
• Escolha a exportação que combina com o seu código. Escolha CSS, Tailwind, SCSS ou JSON em “Exportar como”, confira a caixa de prévia e clique em “Copiar código”. O CSS gera variáveis :root chamadas --color-1 em diante, o SCSS gera $color-1 em diante e o Tailwind gera palette-1 em diante, todos com hex em minúsculas. O JSON dá cada cor em hex com letras maiúsculas, números rgb e a participação com uma casa decimal. “Copiar paleta completa” copia os códigos hex separados por vírgulas. “Baixar faixa PNG” salva uma imagem de 1000 × 200 com cada cor tão larga quanto sua participação, com nome como photo_palette.png.

Problemas comuns e como resolvê-los

Aparece “Não foi possível carregar a imagem. O arquivo pode estar corrompido ou em um formato não suportado.”

O navegador aceitou o arquivo, mas não conseguiu decodificá-lo como imagem. As causas habituais são um arquivo danificado ou baixado pela metade, ou uma imagem que o seu navegador não consegue desenhar. Abra o original em outro programa, salve ou exporte de novo como JPEG ou PNG e adicione o novo arquivo. A lista de amostras fica vazia enquanto esta mensagem aparece.

Aparece “report.pdf é um arquivo PDF, que esta ferramenta não consegue abrir.” (com o nome e o tipo do seu próprio arquivo).

A área de soltar lê os primeiros bytes de um arquivo, então renomear um PDF para .jpg não adianta. Esta ferramenta abre JPEG, PNG, WebP, GIF e fotos HEIC do iPhone. Arquivos AVIF, BMP, TIFF e SVG são recusados. Um arquivo não identificável recebe “Este formato de arquivo não é suportado.” e o seu nome. Converta antes a imagem para JPEG ou PNG. Um link para uma ferramenta que abre o arquivo pode vir depois da mensagem. Um arquivo de 0 byte, muitas vezes um marcador de posição do OneDrive ou do iCloud, recebe uma mensagem própria pedindo que você o baixe primeiro.

Aparece “Esse site não permite que outros sites baixem seus arquivos. Baixe o arquivo para o seu dispositivo primeiro e depois solte-o aqui.”

Isto aparece depois de “Ou cole a URL de um arquivo” e “Buscar”. O seu navegador pede a imagem ao outro site, e a maioria dos sites não deixa que outro site baixe seus arquivos. Salve a imagem no seu dispositivo e solte-a na área. Uma mensagem diferente, “O link retornou um erro (HTTP 404)”, com o seu próprio número de status, significa que o próprio endereço falhou, então confira-o ou salve o arquivo e solte-o aqui.

O controle diz “Número de cores (12)”, mas aparecem menos amostras.

Cores que arredondam para o mesmo hex são unidas e grupos vazios são descartados, então imagens chapadas, como logotipos, capturas de tela e gráficos simples, dão menos amostras do que o controle pede. Não há nada de errado. Pixels quase transparentes também são ignorados, e uma imagem totalmente transparente não dá amostra alguma. Para uma paleta mais simples, reduza o controle. Para tons mais sutis, aumente até 16 em uma foto.

Aparece “Não foi possível copiar para a área de transferência.”

O navegador recusou a cópia, o que pode acontecer quando a página não é segura, é exibida em um quadro (frame) ou o navegador bloqueou o acesso à área de transferência. A mensagem permanece até você mover o controle ou carregar outra imagem. Clique uma vez na página e tente de novo. Se ainda falhar, selecione o texto na caixa de prévia em “Exportar como” e copie à mão, ou use “Baixar faixa PNG” para salvar a paleta como imagem.

Como se compara

O conta-gotas de um aplicativo de design lê pixels exatos, e esta ferramenta faz isso a cada clique. O que ela acrescenta é a lista de cores dominantes, obtida agrupando as cores da imagem inteira. Ela usa a imagem toda, então um fundo grande vai dominar a lista, e não há como selecionar uma área nem remover o fundo antes. Trabalha a partir de uma cópia de no máximo 200 px, não dá nome às cores e não ordena por matiz. As cores ficam no seu dispositivo, já que a imagem é lida no navegador. Para montar uma paleta a partir de uma única cor, em vez de uma foto, use o Gerador de paleta de cores.