Seletor de Cor de Imagem Online

Solte uma imagem, passe o cursor para pré-visualizar qualquer pixel e clique para pegar seu HEX, RGB e HSL — tudo no seu navegador. A imagem nunca sai do seu dispositivo.

O Seletor de Cor de Imagem decodifica sua imagem para um canvas e amostra os pixels inteiramente no seu navegador. A imagem que você solta e as cores que você pega nunca saem do seu dispositivo e não são enviadas à ArrayKit.

Abrir o Conversor de Cores CSS

Sobre Seletor de Cor de Imagem

O Seletor de Cor de Imagem transforma qualquer imagem em um amostrador de cores. Solte ou escolha uma foto, logo, captura de tela ou mockup de design, depois mova o cursor por ela para pré-visualizar o pixel sob o retículo, e clique para fixar aquela cor exata. Cada amostra é mostrada como HEX, RGB e HSL ao lado de uma amostra ao vivo, então você pode inseri-la direto no CSS, em um token de design ou em um balde de tinta. Uma faixa de cores recentes mantém suas últimas escolhas à mão para montar uma paleta, e cada valor tem seu próprio botão de copiar. Pixels transparentes mantêm seu alfa, então sobreposições PNG são lidas de volta como rgba e #rrggbbaa. É feito para designers, desenvolvedores front-end e qualquer pessoa combinando uma cor de marca a partir de uma imagem. A imagem é decodificada para um canvas e amostrada no seu dispositivo — nunca é enviada a lugar nenhum.

Recursos

Como usar Seletor de Cor de Imagem

  1. Clique na zona de soltar ou arraste um arquivo de imagem para ela
  2. Mova o cursor sobre a imagem para pré-visualizar a cor do pixel
  3. Clique em um ponto para fixar aquela cor e revelar seu HEX, RGB e HSL
  4. Copie a notação que você precisa, ou reabra uma escolha anterior das Cores recentes

Exemplo

Entrada

Sampled pixel: R 37, G 99, B 235 (opaque)

Saída

HEX #2563eb
RGB rgb(37, 99, 235)
HSL hsl(221, 83%, 53%)

Um clique em um botão azul transforma o pixel em valores de cor CSS prontos para colar.

Erros comuns e solução de problemas

Perguntas frequentes

Como pego uma cor de uma imagem?
Solte ou escolha a imagem, passe o cursor sobre ela para pré-visualizar a cor do pixel, depois clique no ponto exato que você quer. O seletor mostra na hora o HEX, RGB e HSL daquele pixel com uma amostra, e cada valor tem um botão de copiar.
Posso obter o código HEX de uma cor em uma captura de tela?
Sim. Carregue a captura de tela como qualquer imagem, passe o cursor para achar o tom que você quer e clique nele. O código HEX aparece ao lado dos valores RGB e HSL para você copiá-lo no CSS ou em uma ferramenta de design.
O seletor de cor mantém a transparência de imagens PNG?
Mantém. Quando um pixel amostrado não é totalmente opaco, o alfa é preservado: o RGB é mostrado como rgba(...) e o HEX ganha um oitavo par de alfa (#rrggbbaa), correspondendo a como o pixel realmente renderiza.
De quais formatos de imagem posso pegar cores?
Qualquer um que seu navegador consiga decodificar para um canvas — PNG, JPEG, WebP, SVG, GIF, AVIF, BMP e ICO. Para cores de marca exatas prefira um PNG sem perdas, já que JPEG e WebP podem deslocar um preenchimento uniforme em um tom.
Posso salvar várias cores de uma única imagem?
Sim. Cada clique adiciona a cor à faixa de Cores recentes, até uma dúzia de escolhas. Clique em qualquer amostra ali para reabri-la, depois copie seu HEX, RGB ou HSL para montar uma paleta a partir da imagem.
Minha imagem é enviada quando eu pego uma cor dela?
Não. O Seletor de Cor de Imagem desenha sua imagem em um canvas e lê os pixels inteiramente no seu dispositivo. A imagem nunca é enviada à ArrayKit ou a qualquer servidor, então mockups e fotos privados ficam no seu dispositivo.

Ferramentas relacionadas

Todas as ferramentas de ArrayKit