Extrator de cores de imagem grátis
Extrator de paleta de cores
O Extrator de paleta de cores extrai as cores exatas de uma imagem e as entrega como uma paleta de cores com códigos HEX, RGB, HSL, OKLCH e CMYK. Cada cor mostra sua proporção na imagem, e a imagem nunca sai do seu navegador.
- Grátis, sem cadastro
- As imagens não saem do seu dispositivo
- Cores exatas de pixel
Solte as imagens aqui
ou cole com Ctrl+V. JPG, PNG, WebP, GIF, AVIF, SVG. Até 20 imagens.
Como funciona o extrator de paleta de cores?
O extrator de paleta de cores lê os pixels da sua imagem no navegador, agrupa as cores semelhantes e retorna as cores que melhor descrevem a imagem.
Adicione uma imagem
Solte, cole ou escolha até 20 imagens nos formatos JPG, PNG, WebP, GIF, AVIF ou SVG. Uma captura de tela colada também funciona.
As cores são agrupadas
O extrator agrupa os pixels em OKLab, um espaço de cor criado para corresponder à percepção humana das cores, e mescla as cores que parecem iguais.
Ajuste a paleta
Defina de 2 a 20 cores, escolha um modo e clique na imagem para adicionar qualquer pixel exato. Arraste um marcador para escolher a cor de novo.
Copie ou exporte
Copie códigos HEX, verifique o contraste ou exporte a paleta para CSS, Tailwind, Adobe, Procreate, GIMP e outros.
O que o extrator retorna para cada cor?
Cada cor extraída retorna sete códigos de cor, o nome de cor mais próximo, sua proporção na imagem, seu contraste com o branco e o preto e uma escala de tons claros e escuros de 50 a 950.
| Código | Exemplo | Uso |
|---|---|---|
| HEX | #2A9D8F | Web design, CSS e a maioria dos apps de design |
| RGB | rgb(42 157 143) | Telas, CSS e editores de imagem |
| HSL | hsl(173 58% 39%) | Ajuste de luminosidade e saturação no CSS |
| HSB | hsb(173, 73%, 62%) | Seletores de cor do Photoshop, Figma e Procreate |
| OKLCH | oklch(63% 0.101 183) | Edição perceptual de cores no CSS moderno |
| CIE Lab | lab(58.4 -35.2 -2.3) | Medição de diferença de cor e fluxos de impressão |
| CMYK | 73, 0, 9, 38 | Estimativas de impressão sem perfil de impressora |
Qual modo de extração combina com a sua imagem?
O modo de extração define quais cores entram na paleta quando uma imagem tem mais cores do que o tamanho da paleta.
| Modo | O que seleciona | Indicado para |
|---|---|---|
| Equilibrado (padrão) | Áreas grandes de cor e destaques distintos, pontuados pela proporção de pixels e pela distância das cores já escolhidas | Fotos, ilustrações e imagens de marca |
| Dominante | As cores que cobrem mais pixels | Medir quais cores preenchem uma imagem |
| Vibrante | A pontuação do modo Equilibrado ponderada pelo croma, para que destaques saturados fiquem mais bem classificados | Moodboards, fotos de produtos e obras de arte |
A opção Pixel exato retorna uma cor que existe na imagem. A opção Média retorna a cor média de cada grupo. O controle deslizante Mesclar semelhantes define o quão próximas duas cores precisam estar para contar como uma só, medido pela distância ΔE_OK (0,03 por padrão).
Qual é a precisão das cores extraídas?
As cores extraídas são valores exatos de pixel: o extrator amostra pixels reais sem misturá-los, então todo código HEX de uma paleta com Pixel exato aparece na sua imagem.
- Agrupamento perceptual. As cores são comparadas em OKLab, onde distâncias iguais parecem diferenças iguais. A distância em RGB exagera algumas diferenças de cor e subestima outras.
- Resultados estáveis. O agrupamento usa uma semente fixa, então a mesma imagem com as mesmas configurações sempre retorna a mesma paleta.
- Proporções reais. Cada pixel é atribuído à cor mais próxima da paleta, então as proporções somam 100%.
- Transparência respeitada. Pixels com menos de 50% de opacidade não contam, então um PNG transparente mostra apenas as cores visíveis.
O guia Como funciona a extração de cores (em inglês) compara este método com median cut, quantização octree e k-means simples.
De quais fontes você pode extrair cores?
O Extrator de paleta de cores lê quatro tipos de fonte, cada um com sua própria ferramenta e configurações.
Imagens
Fotos, ilustrações, capturas de tela e obras de arte. Várias imagens geram uma paleta combinada em que cada imagem tem o mesmo peso.
Logotipos
O Extrator de cores de logotipo retorna as cores exatas do logotipo, remove o fundo e ignora os pixels mesclados nas bordas.
Sites
O Extrator de cores de sites lê o CSS de um site e retorna as cores de marca, texto, fundo e borda a partir de uma URL.
Pixels individuais
O Seletor de cores de imagem retorna o código HEX exato de qualquer pixel que você clicar, com uma lupa para mais precisão.
Quais formatos de exportação você pode baixar?
O extrator exporta uma paleta em 11 formatos, todos gerados no seu navegador.
| Formato | Arquivo | Abre em |
|---|---|---|
| Variáveis CSS | .css | Qualquer folha de estilo de site |
| Tailwind v4 e v3 | Bloco @theme, tailwind.config.js | Projetos Tailwind CSS |
| SCSS | .scss | Projetos Sass |
| Design tokens | .tokens.json | Ferramentas W3C Design Tokens e plugins do Figma |
| Adobe Swatch Exchange | .ase | Photoshop, Illustrator e InDesign |
| Procreate | .swatches | Procreate no iPad |
| Paleta GIMP | .gpl | GIMP, Inkscape e Krita |
| SVG | .svg | Figma, Sketch e Illustrator |
| Cartão de paleta PNG | .png | Apresentações, moodboards e posts em redes sociais |
| Lista HEX | .txt | Qualquer app |
Os formatos de código podem incluir uma escala de tons claros e escuros de 50 a 950 para cada cor, criada em OKLCH a partir do valor extraído.
Quem usa um extrator de paleta de cores?
Designers
Extraia uma paleta de uma foto de moodboard ou de uma imagem de referência e envie as amostras para o Figma, apps da Adobe ou Procreate.
Desenvolvedores
Transforme uma captura de tela de design em variáveis CSS ou em um tema Tailwind com uma escala completa de tons claros e escuros.
Donos de negócios
Encontre os códigos HEX exatos de um logotipo ou de uma foto de produto para manter o site, a loja virtual e os posts em redes sociais consistentes.
Artistas e ilustradores
Estude as proporções de cor de uma pintura ou foto antes de começar uma nova obra.
Clientes de gráfica
Reúna valores de tela exatos e estimativas CMYK para orientar a gráfica antes da prova.
Revisores de acessibilidade
Verifique cada par de cores de uma paleta com os limites do WCAG 2. O guia Contraste WCAG em uma paleta (em inglês) explica as regras.
Suas imagens são enviadas?
Não. As imagens são decodificadas e analisadas dentro do seu navegador, e os arquivos nunca chegam a um servidor. O site não armazena imagens nem paletas.
Dois recursos acessam o servidor: carregar uma imagem a partir de um endereço da web e ler o código de um site. Os dois buscam o arquivo público para você e não guardam cópia. A política de privacidade (em inglês) lista todos os dados que o site trata.
Perguntas frequentes sobre o extrator de paleta de cores
O extrator de paleta de cores é grátis?
Sim. Todos os recursos e todos os formatos de exportação são gratuitos, sem conta, marca d'água ou limite de uso.
Quantas cores uma paleta pode ter?
Uma paleta tem de 2 a 20 cores, definidas no controle Cores. A paleta padrão tem 6 cores.
Por que outra ferramenta mostra cores diferentes?
As ferramentas diferem em espaço de cor, algoritmo de agrupamento, amostragem e valor da amostra. Este extrator agrupa as cores em OKLab e retorna valores reais de pixel por padrão, enquanto muitas ferramentas calculam a média das cores em RGB.
Posso extrair uma paleta de várias imagens?
Sim. Adicione até 20 imagens, e o extrator cria uma paleta combinada em que cada imagem tem o mesmo peso, além de uma pequena paleta para cada imagem.
O extrator funciona no celular?
Sim. O extrator roda em navegadores de celular, aceita fotos da galeria e escolhe cores com um toque.
Quais formatos de imagem são compatíveis?
Arquivos JPG, PNG, WebP, GIF, AVIF, BMP e SVG funcionam em todos os navegadores atuais. Fotos HEIC abrem apenas no Safari, então outros navegadores precisam de uma cópia em JPG ou PNG.