Extrator de Paleta de Cores de Imagem

Solte uma imagem para extrair sua cor dominante e uma paleta completa — copie cada amostra como HEX, RGB ou HSL, ou exporte variáveis CSS e cores Tailwind. Nunca sai do seu navegador.

O Extrator de Paleta de Cores de Imagem decodifica sua imagem e analisa suas cores inteiramente no seu navegador. A imagem nunca é enviada — nenhum dado de imagem ou cor extraída é enviado à ArrayKit.

Abrir o Seletor de Cor de Imagem

Sobre Extrator de Paleta de Cores

O Extrator de Paleta de Cores de Imagem transforma qualquer imagem em um esquema de cores utilizável. Solte ou escolha uma foto, um logo, uma captura de tela ou um mockup de design e ele revela a única cor dominante mais uma paleta dos tons mais proeminentes ao longo da imagem. Cada amostra é mostrada como HEX, RGB e HSL, então você pode pegar um valor direto para o CSS, um token de design ou um balde de tinta. Ajuste o tamanho da paleta de quatro a doze cores, copie uma amostra individual ou todos os códigos HEX de uma vez, ou pegue um bloco pronto de variáveis CSS :root e um trecho de cores Tailwind para o seu tema. É feito para designers, desenvolvedores front-end e qualquer pessoa combinando uma paleta de marca a partir de uma imagem. A imagem é decodificada e suas cores são lidas no seu dispositivo — nada é enviado.

Recursos

Como usar Extrator de Paleta de Cores

  1. Clique na zona de soltar ou arraste um arquivo de imagem até ela
  2. Leia a cor dominante e as amostras da paleta extraída
  3. Alterne as amostras entre HEX, RGB e HSL, ou mude o tamanho da paleta
  4. Copie uma amostra individual, todos os códigos HEX ou o bloco CSS ou Tailwind

Exemplo

Entrada

Uploaded: brand-hero.png (blue / green / red artwork)

Saída

:root {
  --color-1: #2563eb;
  --color-2: #10b981;
  --color-3: #ef4444;
}

Uma paleta de três cores vira um bloco de variáveis CSS pronto para copiar.

Erros comuns e solução de problemas

Perguntas frequentes

Quantas cores posso extrair de uma imagem?
Você pode puxar de quatro a doze cores para a paleta, mais a única cor dominante mostrada por conta própria. Mude o tamanho da paleta a qualquer momento e as amostras, as variáveis CSS e o bloco Tailwind atualizam na hora.
Qual é a diferença entre a cor dominante e a paleta?
A cor dominante é a cor mais representativa de toda a imagem, mostrada com seu HEX, RGB e HSL. A paleta é um conjunto das cores mais proeminentes ao longo da imagem, ordenadas por quanto se destacam.
Posso exportar a paleta como variáveis CSS ou cores Tailwind?
Sim. A ferramenta gera um bloco :root de propriedades personalizadas --color-N e um objeto de cores Tailwind com chaves palette-1, palette-2 e assim por diante. Copie qualquer um com um clique e cole no seu projeto.
De quais formatos de imagem posso extrair uma paleta?
PNG, JPEG, WebP, SVG, GIF, AVIF, BMP e ICO todos funcionam. Solte ou escolha o arquivo e a paleta é gerada a partir dos pixels decodificados no seu navegador.
Como monto uma paleta que combina com a minha marca?
Envie seu logo, uma foto de produto ou uma captura de tela do seu site. O extrator revela as cores mais proeminentes para você fixar os valores HEX da marca, depois exportá-los como variáveis CSS ou tokens Tailwind.
Por que duas das minhas amostras saíram quase idênticas?
Imagens dominadas por um único matiz produzem vários tons próximos. Reduza o tamanho da paleta para fundi-los, ou escolha uma imagem com mais variedade de cor para uma distribuição mais ampla.

Ferramentas relacionadas

Todas as ferramentas de ArrayKit