Seletor de cor de imagem

Seletor de pixels vs. extrator de paletas: dois trabalhos diferentes

Uma confusão comum que vale a pena esclarecer primeiro: isto é um seletor de pixels, não um extrator de paletas. As duas ferramentas soam parecidas e ambas envolvem imagens, mas respondem a perguntas diferentes:

• Seletor de pixels (esta ferramenta): você clica em um local exato, e a ferramenta lê a cor daquele único pixel. Use quando você precisa da cor de um elemento específico: o vermelho da marca em um logotipo, o azul exato de um céu em uma foto de referência, o branco-acinzentado de um fundo de interface em uma captura de tela.
• Extrator de paletas: a ferramenta analisa a imagem inteira e retorna as 5-8 cores dominantes estatisticamente. Use quando você quer um esquema de cores inspirado em uma imagem como um todo, não em um ponto específico.

Se você realmente quer cores dominantes estatísticas, a ferramenta Extrator de paleta de cores gratuito é a escolha certa. As duas ferramentas se complementam: extraia uma paleta para entender a narrativa de cores como um todo e então use este seletor para pegar destaques específicos.

Como funciona

O navegador desenha a imagem que você enviou em um elemento HTML <canvas>. Quando você clica, a ferramenta chama ctx.getImageData(x, y, 1, 1): um método da Canvas 2D API que retorna os valores RGBA de um único pixel como um array de quatro elementos (vermelho, verde, azul, alfa). Esses valores são então formatados como HEX, RGB e HSL para exibição. A lupa é um segundo canvas que copia uma pequena região em torno do cursor e a renderiza ampliada, para que você possa ver exatamente qual pixel está prestes a selecionar. Tudo roda localmente no seu navegador; os bytes da imagem nunca são transmitidos.

Quando você recorre a um seletor de pixels

• Correspondência de marca: extrair a cor exata de um logotipo para usar em outro lugar de um design ou material de marketing.
• Fotografia de referência: encontrar o tom de céu preciso, o tom de pele ou a cor de um material natural a partir de uma imagem de referência.
• QA de design: verificar se uma captura de tela corresponde à cor da especificação, pixel a pixel.
• Fazer engenharia reversa de um site existente: pegar a cor renderizada real de um botão ou fundo quando o DevTools não é uma opção (uma captura de tela de um colega, a interface de um concorrente).
• Análise de mockup: extrair as cores exatas de um mood board ou de um comp de design.
• Inspeção de capturas de tela de celular: as capturas de tela de telefone podem ser examinadas no desktop sem precisar do dispositivo original.
• Auditorias de acessibilidade: ler a cor renderizada real de um texto ou de elementos de interface (que pode diferir do CSS de origem por causa do anti-aliasing ou do empilhamento de transparência).

HEX, RGB, HSL: a mesma cor, três notações

A ferramenta emite o mesmo valor de cor em três formatos porque contextos diferentes preferem formatos diferentes:

• HEX: #2b7190. Compacto, seis caracteres, o padrão de fato para o design web e para a maioria dos fluxos de copiar e colar. Fácil de colocar em CSS, em seletores de cor de ferramentas de design ou em markdown.
• RGB: rgb(43, 113, 144). A forma numérica subjacente. Útil quando você precisa ajustar os canais independentemente ou quando trabalha em ferramentas que esperam valores decimais (os valores arbitrários do Tailwind, geração programática).
• HSL: hsl(199, 54%, 37%). Matiz / saturação / luminosidade, mais fácil para os humanos raciocinarem. Ajustar «o mesmo matiz, um pouco mais claro» é um número no HSL, mas uma mudança multicanal no HEX ou no RGB.

A armadilha do anti-aliasing

Um seletor perfeito ao pixel lê exatamente o pixel sob o seu cursor, mas, em imagens reais, esse pixel pode não ser a cor que você pensa. O anti-aliasing mescla as bordas de letras, ícones e formas curvas com o fundo ao redor para deixá-las com aparência suave. Então clicar na «borda» de um texto preto contra o branco pode te dar um cinza em vez de preto puro. Dois hábitos práticos para evitar a armadilha:

• Pegue a cor do centro de formas sólidas, não das bordas onde o anti-aliasing acontece.
• Use a lupa para confirmar que você está em um pixel que é claramente a cor da marca, e não um pixel de borda mesclado.

A compressão JPEG e por que a qualidade da referência importa

A compressão JPEG introduz pequenas distorções de cor, especialmente em torno de bordas de contraste e em áreas planas de cor sólida. Uma cor de marca «vermelho puro» (#FF0000) exportada como JPEG e depois reimportada pode ser lida como #FE0102 ou algo parecido, próximo, mas não idêntico à origem. Para uma correspondência de marca exata, prefira:

• Imagens de origem PNG ou WebP sem perdas quando você pega cores que importam.
• Arquivos de origem vetoriais (SVG, PDF) renderizados em zoom alto: as cores vetoriais são exatas.
• Diretamente da ferramenta de design (Figma, Sketch, Photoshop) quando possível, em vez de uma captura de tela.

Alternativas de conta-gotas no nível do navegador e do sistema operacional

Várias outras formas de pegar cores da sua tela:

• A CSS EyeDropper API (new EyeDropper()). Status da MDN: «Disponibilidade limitada, este recurso não é Baseline porque não funciona em alguns dos navegadores mais usados.» Na prática, suportada no Chrome e no Edge (desde o Chrome 95), não no Firefox nem no Safari. Retorna uma cor como { sRGBHex }. Boa quando suportada, mas o suporte irregular significa que um seletor baseado em Canvas ainda merece o seu lugar para uso entre navegadores.
• macOS Digital Color Meter: aplicativo nativo do macOS que lê qualquer pixel na tela.
• Windows PowerToys Color Picker: o utilitário oficial PowerToys da Microsoft inclui um seletor de pixels.
• O DevTools do navegador: o Chrome e o Firefox incluem conta-gotas na interface do seletor de cores quando você edita CSS no Inspetor.

Por que um seletor baseado na web ainda merece o seu lugar: funciona em capturas de tela compartilhadas que chegaram pelo Slack ou por e-mail, não exige instalar software, roda a partir de qualquer navegador em qualquer sistema operacional, e a imagem nunca sai da sua máquina.

Privacidade

As imagens muitas vezes carregam mais do que apenas pixels: os metadados EXIF podem incluir as coordenadas GPS de onde a foto foi tirada, o número de série da câmera e os timestamps originais de captura. As capturas de tela podem conter interfaces confidenciais, textos de rascunho ou identidade visual pré-lançamento. Os rostos são identificadores biométricos sob as leis de privacidade de várias jurisdições. Esta ferramenta roda inteiramente no seu navegador: a imagem vai do seu sistema de arquivos para um canvas na memória, é amostrada pixel a pixel, e a única coisa que sai da página é o valor da cor quando você o copia. As ferramentas de seleção de cor do lado do servidor enviam a imagem inteira; é essa a troca.

Erros comuns

1. Pegar a cor em uma borda com anti-aliasing. A cor que você obtém é uma mescla da forma e do seu fundo. Em vez disso, pegue do meio de áreas sólidas.
2. Pegar a cor de um JPEG muito comprimido. Os artefatos de compressão deslocam as cores sutilmente. Use uma fonte de qualidade mais alta para uma correspondência de marca exata.
3. Confundir o seletor com um extrator de paletas. Se você quer as cores dominantes de uma imagem como um todo, você quer um extrator de paletas, não um seletor de pixels.
4. Pegar a cor de um PNG transparente contra um fundo de página colorido. Dependendo de como o canvas compõe a transparência, você pode acabar amostrando o fundo da página através do canal alfa. Converta a imagem para um fundo conhecido primeiro, se a precisão importa.
5. Confiar na cor da captura de tela exatamente. Alguns monitores aplicam uma calibração de cor que desloca a cor renderizada em relação à origem. O valor de pixel que o seletor lê é o que está codificado na imagem, não necessariamente o que a tela de origem exibiu.
6. Pegar a cor de uma imagem de baixa resolução e perder detalhe. Uma miniatura 200×100 de um logotipo dá menos pixels distintos para escolher do que o material original. Quando possível, trabalhe a partir da fonte de mais alta resolução.

Mais perguntas frequentes

Qual é a diferença entre isto e um gerador de paleta de cores?

Um seletor lê a cor de um pixel específico em que você clica. Um gerador de paletas analisa a imagem inteira e retorna as cores mais dominantes estatisticamente. Trabalhos diferentes: os seletores são precisos, os geradores de paletas são interpretativos. Para uma paleta gerada a partir da sua imagem, veja a Extrator de paleta de cores gratuito.

Por que a cor que eu pego difere da especificação da marca?

Duas razões comuns. Primeira, a imagem da qual você está pegando pode ter sido comprimida (a recodificação JPEG desloca as cores em alguns valores RGB). Segunda, o pixel em que você clicou pode estar em uma borda com anti-aliasing que se mescla com o fundo. Para uma correspondência de marca exata, use uma fonte vetorial ou um PNG / WebP sem perdas de alta qualidade e pegue do meio de áreas sólidas.

Posso usar isto no celular?

Sim, o toque para selecionar funciona em dispositivos de toque, embora o comportamento da lupa e a precisão exata ao pixel possam variar conforme o navegador móvel. Para um trabalho perfeito ao pixel no celular, o alvo de toque maior dificulta um seletor ancorado na lupa; considere fazer a seleção crítica de cor em um navegador de desktop quando possível.

A imagem é enviada para algum lugar?

Não. A imagem é carregada em um elemento Canvas local pelas APIs FileReader / de carregamento de imagem do navegador; as leituras de pixel acontecem via getImageData; nada é transmitido a um servidor, nenhum endpoint de análise vê a imagem. Útil quando a imagem contém dados de GPS de EXIF, rostos, capturas de tela de interface confidencial ou identidade visual pré-lançamento que você não quer enviar.

Por que pegar uma cor de uma imagem se o CSS mostra o valor?

O CSS mostra a cor declarada, mas os pixels renderizados podem diferir: gradientes, empilhamento de opacidade, anti-aliasing, ajustes de modo escuro, tratamento de perfil de cor do navegador e compressão de captura de tela, todos causam divergência. Quando você precisa saber o que o pixel realmente é (para QA de design, acessibilidade ou correspondência com uma referência), ler o pixel renderizado diretamente é a única resposta confiável.

Por que a lupa é útil?

Pixels individuais são minúsculos: na resolução típica de tela, os pixels individuais estão bem abaixo do tamanho que o seu olho consegue distinguir sem ajuda. A lupa mostra uma visão ampliada da área sob o seu cursor, para que você possa confirmar exatamente em qual pixel vai clicar. Especialmente valiosa em imagens densas, texto com anti-aliasing ou formas curvas em que os pixels adjacentes diferem por pequenas quantidades.