Seletor de Cor de Imagem

Escolha a cor de qualquer pixel de uma imagem e extraia sua paleta de cores dominantes. Sua imagem nunca sai do seu navegador, nada é enviado.

Imagem

Solte uma imagem aqui, cole com Ctrl+V / Cmd+V ou escolha um arquivo

Cor escolhida

Carregue uma imagem para ver suas cores

Cores dominantes

Quantidade de cores

5 8 12

Carregue uma imagem para ver suas cores

O que é um seletor de cor de imagem?

Um seletor de cor de imagem lê a cor exata de um pixel de uma foto, captura de tela ou logo, para que você a reutilize no CSS ou em uma ferramenta de design sem adivinhar. Este também extrai as cores dominantes da imagem com o algoritmo median cut: ele divide repetidamente os pixels em grupos de cores parecidas e tira a média de cada grupo, o que gera uma paleta que reflete quanto da imagem cada cor ocupa. Uma lupa como o conta-gotas das ferramentas de desenvolvedor do navegador amplia os pixels em volta do ponteiro para você acertar o exato, com o mouse, arrastando o dedo no celular ou com as setas do teclado. A imagem é decodificada e analisada inteiramente no seu navegador e nunca é enviada a lugar nenhum.

Exemplos

Lendo cores de pixels e paletas de uma imagem em código e na linha de comando:

JavaScript

const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
const [r, g, b, a] = ctx.getImageData(x, y, 1, 1).data;

Python

from PIL import Image

img = Image.open("photo.jpg").convert("RGB")
r, g, b = img.getpixel((x, y))
palette = img.quantize(colors=8).getpalette()[:24]

ImageMagick

magick photo.jpg -colors 8 -format %c histogram:info:- | sort -rn

macOS

# Digital Color Meter (built in) shows the color under the cursor:
open -a "Digital Color Meter"

Casos de uso

Tirar a cor da marca de um logo

Quando tudo o que você tem é um PNG do logo, clique na cor principal para obter o valor HEX exato para sua folha de estilos.

Montar uma paleta a partir de uma foto

Extraia as cores dominantes de uma foto de produto ou de um moodboard como ponto de partida para o esquema de cores de uma página.

Recriar um design a partir de uma captura

Pegue as cores de fundo, texto e destaque diretamente de uma captura do site ou app que você precisa reproduzir.

Verificar cores em assets exportados

Confira se um ícone ou banner exportado manteve as cores certas depois da compressão ou de uma conversão de perfil de cor.

Perguntas frequentes

Minha imagem é enviada para algum lugar?

Não. O arquivo é aberto localmente com o decodificador de imagens do seu navegador e desenhado em um canvas no seu dispositivo. Nada é enviado a nenhum servidor, então é seguro usar com capturas privadas e designs não publicados.

Quais formatos de imagem funcionam?

Qualquer formato que seu navegador consiga exibir: PNG, JPEG, GIF e WebP em todos, além de formatos como AVIF ou HEIC onde o navegador os suportar.

Por que a cor escolhida é um pouco diferente da original?

A compressão JPEG desloca as cores nas bordas e nos degradês, e imagens muito grandes são reduzidas a 2048 pixels no lado maior antes da escolha, o que faz a média de pixels vizinhos. Para valores exatos, use a lupa para cair no pixel que você quer, escolha em uma área lisa ou use um PNG.

Como as cores dominantes são calculadas?

A imagem é reduzida a cerca de 100 pixels no lado maior e o algoritmo median cut agrupa os pixels parecidos. A média de cada grupo vira uma cor, e a porcentagem mostra aproximadamente quanto da imagem ela ocupa. Pixels totalmente transparentes são ignorados.

Posso colar uma captura de tela diretamente?

Sim. Copie uma captura para a área de transferência e pressione Ctrl+V (Cmd+V no Mac) nesta página. Você também pode arrastar um arquivo de imagem para a área de soltar.

Ferramentas relacionadas

Conversor de Cores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Cores (WCAG AA / AAA)Gerador de Tonalidades (Tints e Shades)Gerador de Gradiente CSS Gerador de Paleta de Cores (Harmonias)Simulador de Daltonismo