CDRN

Capturar a cor de um pixel de imagem

  • Painel
  • Documentação
  • API
recupera a cor exata de um pixel da sua imagem (RGB, HSL, hexadecimal) clicando no ponto à sua escolha

O que é um color picker de imagem?

Um color picker (em português conta-gotas de cor ou captura de cor) é uma ferramenta que devolve o valor exato de um píxel escolhido numa imagem. Carrega uma fotografia, clica no ponto que lhe interessa, e a ferramenta devolve a cor precisa sob a forma HEX, RGB e HSL. É o equivalente web do conta-gotas dos softwares de design como Photoshop, GIMP ou Figma.

A nossa ferramenta funciona diretamente no seu navegador. Carrega a imagem, ela é apresentada na página, e basta clicar num píxel para recuperar a sua cor. A leitura do píxel faz-se no lado do cliente através da API canvas, sem ida e volta ao servidor, sem recompressão e sem envio da imagem pela rede para a seleção.

Diferença com um extrator de cores

O nosso extrator de cores e o nosso color picker respondem a duas necessidades distintas que vale a pena distinguir:

  • O extrator analisa o conjunto da imagem e devolve a paleta dominante (as 5, 8 ou 10 tonalidades mais representadas). É a ferramenta de eleição para sintetizar o ambiente cromático de uma fotografia, criar um mood board ou alimentar uma carta gráfica.
  • O color picker devolve a cor exata de um píxel preciso que indica. É a ferramenta de eleição quando sabe onde olhar: um logótipo numa captura, uma tonalidade precisa de um gradiente, um fundo de ecrã de referência.

O extrator trabalha sobre milhões de píxeis e aplica clustering para fazer emergir grupos de cores; o picker limita-se a ler o valor RGB armazenado na posição em que clicou. O primeiro generaliza, o segundo é cirúrgico.

Como funciona, tecnicamente

Uma imagem digital é uma grelha de píxeis, cada píxel com três canais RGB (vermelho, verde, azul) codificados normalmente em 8 bits, ou seja 256 valores por canal. Quando clica num ponto, a ferramenta:

  1. Desenha a sua imagem num elemento canvas, conservando as suas dimensões nativas (com um teto de 1500 píxeis de largura para se manter confortável no ecrã).
  2. Converte a posição do clique em coordenadas nativas da imagem, compensando o redimensionamento de apresentação do navegador.
  3. Lê o valor RGBA do píxel através da API canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Apresenta uma pré-visualização da cor escolhida. Na submissão, o servidor lê a mesma posição com PHP GD e calcula os códigos HEX, RGB e HSL definitivos.

O valor HSL é calculado pelo nosso serviço de conversão de cor, idêntico ao usado pelo nosso conversor de cores. Coerência de ponta a ponta, obtém os mesmos valores que se tivesse introduzido o código HEX no conversor.

Casos de uso típicos

  • Reproduzir uma cor de captura de ecrã: tem uma captura de um site, quer obter exatamente a tonalidade de um botão ou de um fundo. O picker dá-lhe o código HEX preciso a colar no seu CSS.
  • Identificar uma cor de carta gráfica numa fotografia: um PDF de apresentação, uma página de revista, um visual de produto. Já não precisa de pedir a carta, lê a cor diretamente.
  • Engenharia inversa de identidade visual: capturar o azul exato de um logótipo, o rosa de uma faixa, o laranja de um apelo à ação.
  • Inspiração e vigilância de design: vê uma fotografia que lhe agrada, recupera a tonalidade exata de uma flor, de uma parede, de um cartaz.
  • Debug front-end: uma captura de um bug mostra uma cor incorreta, lê o valor real para comparar com o esperado na maqueta.
  • Criação de paleta a partir de uma referência: picker em vários pontos da mesma imagem para reconstituir uma paleta personalizada.

Como utilizar o color picker

  1. Carregue a sua imagem (PNG, JPG, GIF, BMP, WebP, até 20 MB).
  2. Aparece uma pré-visualização na página. Clique num píxel para recuperar a sua cor.
  3. Um visor marca a posição clicada e aparece uma pré-visualização da cor ao lado.
  4. Valide com o botão de submissão para obter o resultado final: quadrado colorido, código HEX, RGB e HSL.
  5. Para transformar o valor entre formatos, use o nosso conversor de cores.

Perguntas frequentes

Qual a diferença entre HEX, RGB e HSL?

São três representações da mesma cor. HEX (#ff0000) é o formato mais utilizado em CSS. RGB exprime os três canais vermelho / verde / azul em valores 0-255. HSL (Hue, Saturation, Lightness) é mais intuitivo para ajustar uma tonalidade: é o formato a privilegiar quando quer escurecer, dessaturar ou modificar uma cor sem mudar a tonalidade de base.

Porque é que o meu clique não devolve exatamente a cor esperada?

Numa zona de gradiente, dois píxeis vizinhos podem ter valores muito diferentes. Além disso, as imagens JPG são comprimidas com perda: a cor de um píxel pode diferir ligeiramente do original. Para códigos de cor fiáveis, prefira PNG ou imagens não recomprimidas.

As minhas coordenadas são as do ecrã ou as da imagem?

As da imagem original. O nosso script JavaScript converte automaticamente a posição do clique (em píxeis de ecrã) para a posição na imagem nativa. Se a sua imagem tem 4000x3000 e é apresentada a 800x600, um clique no centro devolve (2000, 1500) e não (400, 300).

O picker funciona com imagens transparentes?

Sim. Se clicar num píxel transparente, recupera a cor RGB armazenada nesse local (frequentemente branco ou preto, conforme o editor de origem). A própria transparência (canal alfa) não é restituída no resultado; para analisar um canal alfa, abra a imagem num editor gráfico.

Que tamanho de imagem é aceite?

Até 20 MB, formatos PNG, JPG, GIF, BMP e WebP. As imagens muito grandes são apresentadas a 1500 píxeis de largura no máximo para se manterem confortáveis no ecrã, mas a cor lida continua a ser a do píxel original, sem reamostragem.

As minhas imagens são armazenadas no servidor?

Não. A seleção faz-se no seu navegador. No momento da submissão, o ficheiro é processado em tempo real para confirmar a cor do píxel pedido, depois o ficheiro temporário é eliminado. Nenhuma imagem é conservada, indexada nem partilhada.

O que acontece se o JavaScript estiver desativado?

A submissão clássica do formulário continua possível. As coordenadas x e y são geridas por campos ocultos que o JavaScript preenche no clique. Sem JavaScript, esses campos ficam vazios e o formulário sinaliza que falta uma posição, mas a própria imagem é transmitida ao servidor para tratamento.

Exemplo de pedido

curl -X POST https://cdrn.fr/api/v1/tools/color-picker/execute \
  -F "image=@/path/to/file" \
  -F "x=..." \
  -F "y=..."

Esquema de entrada

Campo Tipo Obrigatório Predefinição
image file ✓ –
x string – –
y string – –

esta ferramenta espera um ficheiro - utilize Content-Type multipart/form-data em vez de application/json

Pontos de acesso

  • GET https://cdrn.fr/api/v1/tools - lista todas as ferramentas disponíveis
  • GET https://cdrn.fr/api/v1/tools/color-picker - obtém o esquema desta ferramenta
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - executa esta ferramenta com um payload JSON