Arraste uma imagem aqui
Como Selecionar e Extrair Cores de Imagens
Perguntas frequentes
Como encontro a cor exata de um pixel numa imagem?
Como extraio TODAS as cores de uma imagem?
O que faz a tolerancia Fundir Semelhantes?
O que sao os formatos de cor HEX, RGB e HSL?
Posso usar as cores extraidas em CSS ou ferramentas de design?
color: #3B82F6;. Use valores RGB em ferramentas de design como Figma, Sketch ou Adobe XD. Use HSL para gerar variacoes mais claras/mais escuras programaticamente. Todo o processamento acontece localmente — as suas imagens nunca sao carregadas para nenhum servidor.Seletor de Cores de Imagem e Extrator de Paletas — Duas Ferramentas numa So
A nossa ferramenta combina um seletor de cores com precisao de pixel com um extrator de paleta de imagem completa. O Seletor de Pixel oferece uma lupa de ampliacao (zoom 10×) para segmentar pixels individuais e obter valores exatos em HEX, RGB e HSL — ideal para amostrar uma cor especifica de um logotipo, maquete de IU ou foto. O modo Todas as Cores extrai cada cor unica de toda a imagem e exibe-as como uma grelha de amostras ordenavel, ordenada pela frequencia com que cada cor aparece. Juntos, cobrem o fluxo de trabalho completo de extracao de cores: desde a amostragem cirurgicamente precisa de um unico pixel ate a descoberta abrangente de paletas.
Modo Seletor de Pixel — Precisao de Cor Cirurgica
O Seletor de Pixel le o valor RGB exato do pixel sob o cursor usando o metodo getImageData() da API Canvas HTML5. A lupa circular mostra uma regiao de 11×11 pixels com zoom de 10× e uma sobreposicao de reticulo, facilitando a segmentacao do pixel exato que deseja — mesmo em imagens de alta resolucao onde os pixels sao demasiado pequenos para ver a olho nu. Cada cor selecionada e exibida simultaneamente em tres formatos:
- HEX — O codigo hexadecimal de 6 caracteres (ex.: #3B82F6). Padrao para CSS, HTML e desenvolvimento web.
- RGB — Valores de Vermelho, Verde e Azul de 0-255. Usado em ferramentas de design grafico e quando precisa de precisao por canal.
- HSL — Matiz (0-360°), Saturacao (0-100%), Luminosidade (0-100%). O formato mais intuitivo para criar tonalidades, sombras e harmonias de cor.
Clique em qualquer cor para guarda-la no seu historico de paleta (ate 12 cores). Use o botao Gerar Paleta para extrair automaticamente as 5 cores mais dominantes atraves de analise de frequencia — uma forma rapida de obter o esquema de cores principal de qualquer imagem.
Modo Todas as Cores — Extracao Completa de Paleta
Enquanto o Seletor de Pixel se destaca na amostragem de pontos individuais, o separador Todas as Cores responde a pergunta: "Que cores estao realmente nesta imagem?" Ele amostra sistematicamente cada pixel (numa resolucao reduzida para desempenho — normalmente 150×150 pixels, ou 22.500 amostras), remove duplicados de cores identicas e apresenta os resultados como uma grelha de amostras de cor com codigos HEX. As cores sao ordenadas por frequencia — as cores mais comuns aparecem primeiro.
O controlo deslizante de tolerancia Fundir Semelhantes e o controlo chave. Sem ele, uma fotografia poderia produzir centenas de cores visualmente indistinguiveis devido a artefactos de compressao JPEG, gradientes subtis e ruido do sensor. Aumentar a tolerancia funde cores cuja distancia euclidiana no espaco RGB fica abaixo do limite. Isto da-lhe uma paleta limpa e utilizavel em vez de uma lista esmagadora. Para logotipos e graficos de cores planas, mantenha a tolerancia em 0-5. Para fotografias, 16-32 normalmente produz os melhores resultados.
Quando Usar Cada Modo
- Seletor de Pixel: Extrair uma cor de marca de um ficheiro de logotipo, amostrar um elemento de IU especifico de uma captura de ecra, obter o tom de pele exato de um retrato, combinar a cor do texto com o fundo numa imagem principal.
- Todas as Cores: Criar uma paleta de cores completa a partir de um mood board ou imagem de referencia, fazer engenharia inversa do esquema de cores do site de um concorrente, analisar a composicao de cor do seu proprio trabalho de design, criar um sistema de cores de marca a partir de um visual principal.
- Ambos em conjunto: Use Todas as Cores para descobrir a paleta e depois mude para o Seletor de Pixel para verificar valores de cor especificos na resolucao maxima.
Privacidade e Processamento
Todo o processamento de imagem acontece inteiramente no seu navegador usando a API Canvas. As suas imagens nunca sao carregadas para nenhum servidor — o ficheiro permanece no seu dispositivo. A ferramenta le os dados dos pixels localmente, realiza todos os calculos em JavaScript e exibe os resultados instantaneamente. Sem contas, sem processamento na nuvem, sem recolha de dados. Pode usa-la offline depois de a pagina ser carregada.