O que é Seletor de cores de imagem?

Extraia valores de cor exatos de qualquer imagem clicando nela. A paleta começa preenchida com as cores dominantes da imagem, uma lupa ajuda você a mirar no pixel certo e cada cor traz HEX, RGB, HSL, HSV, CMYK e o nome mais próximo. Guarde cores na paleta e exporte.

Quando uma imagem carrega, a ferramenta pega as suas seis cores mais comuns e as coloca direto na paleta, então você já tem um conjunto inicial antes de clicar em qualquer coisa. Uma lupa de aumento mostra os pixels sob o cursor, o que facilita acertar o tom exato em vez de um vizinho suavizado. Cada cor que você clica informa seus valores HEX, RGB, HSL, HSV e CMYK, além da cor nomeada CSS mais próxima, e entra numa paleta que você pode copiar como lista hex ou exportar como JSON ou variáveis CSS. Há também uma pré-visualização de visão que passa a imagem por filtros comuns de daltonismo, para você conferir a acessibilidade enquanto trabalha.

Como usar

1. Passo 1 — Carregue qualquer imagem (PNG, JPEG, WebP, GIF). A imagem é carregada em uma tela interativa com lupa de zoom.
2. Passo 2 — Clique em qualquer ponto da imagem para selecionar uma cor. A lupa amplia a área sob o cursor para uma seleção precisa.
3. Passo 3 — Copie qualquer valor em HEX, RGB, HSL, HSV ou CMYK, ou veja o nome mais próximo logo abaixo da amostra. A paleta guarda cada clique — somado às seis cores detectadas automaticamente — para exportar com um toque.

Quando usar

• Reproduzir uma cor de marca a partir de uma captura ou mockup renderizado.
• Montar uma paleta a partir de uma foto de referência para um projeto.
• Identificar o tom exato do logótipo ou do banner de um concorrente.

Resultado

Uma designer carrega uma fotografia da natureza para extrair o verde-azulado exato de um lago na montanha. Ela clica na água, obtém #2E8B8C e adiciona à paleta junto com três outras cores da mesma foto.

Perguntas frequentes

Porque é que a cor capturada difere um pouco da que vejo no Photoshop?

A maioria dos navegadores converte imagens para sRGB ao carregar. Se o ficheiro estiver marcado como Adobe RGB ou Display P3, o valor obtido aqui é o equivalente sRGB. Para igualar totalmente, exporte o original em sRGB antes de amostrar.

A lupa mostra o pixel exato ou uma média de área?

A lupa amostra um único pixel — o que fica sob a mira — e desenha os pixéis à volta apenas como contexto. Se clicar dentro da lupa, fixa o valor desse pixel e os contornos com antialiasing deixam de o enganar.

Posso amostrar cores num PNG com zonas transparentes?

Pode. Pixéis transparentes devolvem o RGB original e mostram o alfa em separado. Se clicar num pixel totalmente transparente, surge a cor de fundo do canvas (branco por defeito), por isso clique em zonas opacas para leituras fiáveis.

Qual a diferença entre HEX, RGB, HSL, HSV e CMYK — qual devo usar?

HEX (#2E8B8C) é a forma mais curta para CSS e ferramentas de design. RGB mostra os três canais entre 0 e 255, útil quando o código precisa de números brutos. HSL descreve matiz, saturação e luminosidade — confortável quando você quer clarear ou saturar um pouco. HSV é parecido, mas usa value (brilho percebido) no lugar da luminosidade, formato preferido pelos seletores da maioria dos programas de design. CMYK dá as quatro porcentagens de impressão, o formato que a gráfica ou o designer de impressão pede.

Posso amostrar várias cores ao mesmo tempo?

Cada imagem enviada preenche a paleta com as seis cores dominantes, e cada clique seguinte adiciona outra amostra ao conjunto. O painel da paleta mostra tudo o que foi amostrado e permite copiar qualquer amostra, copiar todos os códigos hex de uma vez, remover entradas individuais ou exportar todo o conjunto como arquivo JSON ou como propriedades personalizadas CSS prontas para colar.

Ferramentas relacionadas