Paleta extraída
Clique em uma amostra para copiar o HEX, ou copie as variáveis CSS e o JSON da paleta inteira.
Copiado para a área de transferência.
Escolha uma imagem para extrair a paleta de cores.
:root Ferramenta de cor privada
Extrator de paleta de cores a partir de qualquer imagem
Escolha uma foto, logo, captura de tela ou ilustração e receba uma paleta aproveitável com HEX, RGB, HSB, OKLCH, variáveis CSS e JSON prontos para colar.
A imagem é processada localmente pelas APIs de Canvas do navegador e não é enviada para nenhum servidor.
Área de trabalho do extrator
Solte uma imagem no extrator, escolha entre 5 e 10 cores dominantes e copie o formato que encaixa no seu fluxo de design ou de front-end.
Por que este extrator ajuda no trabalho de verdade
Um extrator de paleta só é útil quando devolve algo que você consegue reaproveitar imediatamente.
Analisa a imagem inteira
Em vez de você ficar clicando pixel por pixel com o conta-gotas, a ferramenta agrupa os pixels visíveis e entrega as cores dominantes como ponto de partida.
Devolve código pronto para colar
Você recebe HEX, RGB, HSB, OKLCH, variáveis CSS e JSON, então a paleta vai direto para sites, design systems e componentes sem retrabalho.
Como usar o extrator de paleta de cores
O caminho é curto de propósito: escolha a imagem, confira as cores, copie e refine na sua ferramenta de design se precisar.
01
Escolha uma imagem
Selecione um JPG, PNG, WebP ou GIF do seu aparelho. O navegador decodifica o arquivo e prepara uma amostragem local em Canvas.
- Capturas de tela funcionam muito bem
- Logos e ilustrações costumam gerar paletas mais limpas
02
Defina o tamanho da paleta
Use 5 cores para uma paleta de marca enxuta, ou de 8 a 10 quando a foto, ilustração ou captura de tela tiver mais variação.
O agrupamento roda no navegador com um algoritmo leve, para a ferramenta continuar rápida e privada.
03
Copie o resultado
Clique em qualquer amostra para copiar o HEX, ou copie as variáveis CSS e o JSON quando precisar de uma saída estruturada para o projeto.
Use os valores OKLCH quando quiser ajustar luminosidade percebida e croma nos fluxos modernos de CSS.
Copiar a paletaFormatos que o extrator devolve
A ferramenta foca nos formatos que designers e desenvolvedores realmente colam nos projetos.
HEX
Os valores hexadecimais de seis dígitos usados em CSS, Figma, ferramentas de design e manuais de marca.
RGB
Útil para trabalho com Canvas, cálculos de cor em JavaScript ou valores rgb() rápidos no CSS.
HSB
Matiz, saturação e brilho para entender como cada cor extraída se comporta visualmente.
OKLCH
Referência moderna de cor para luminosidade percebida, croma e matiz.
Variáveis CSS
Um bloco :root pronto para protótipos rápidos e experimentos com design tokens.
JSON
Dados estruturados para transformar a paleta em ferramentas de build ou no código do app.
Perguntas frequentes
Dúvidas de designers, artistas e desenvolvedores que usam o extrator de paleta do Palette Lab.
Como o extrator de paleta funciona?
A ferramenta amostra os pixels visíveis da imagem dentro do navegador, agrupa as cores parecidas e devolve as cores dominantes da paleta.
Minhas imagens são enviadas para algum servidor?
Não. O extrator roda localmente com as APIs de Canvas do navegador, então a imagem escolhida não é enviada para nenhum servidor do Palette Lab.
Quais formatos de imagem são aceitos?
Os formatos que o navegador consegue decodificar, como JPG, PNG, WebP e GIF. O suporte pode variar conforme o aparelho e o navegador.
Posso usar o resultado direto no CSS?
Sim. A ferramenta gera variáveis CSS prontas para copiar, além de HEX, RGB, HSB, OKLCH e JSON para cada cor extraída.
Extraia a paleta da sua próxima imagem
Solte uma captura de tela, logo, ilustração ou foto e transforme em uma paleta aproveitável.
Depois copie o HEX, as variáveis CSS ou o JSON e siga com o trabalho.
O extrator de paleta é gratuito, privado e roda no navegador.