Seletor de Cores de Imagem

Restaurando o arquivo selecionado...

Tentar combinar uma cor de marca a partir de uma captura de tela de logotipo ou extrair um tom de parede de uma foto geralmente significa abrir o Photoshop. Este seletor carrega qualquer imagem em uma tela ampliável e mostra o valor HEX, RGB e HSL de qualquer pixel que você clicar, com uma média de 10×10 para que você possa amostrar uma área em vez de um único pixel e evitar artefatos de ruído JPEG.

Como escolher uma cor de uma imagem

  1. 1

    Carregue ou solte uma imagem

    JPG, PNG, WebP, o seletor se ajusta ao seu viewport.

  2. 2

    Amplie a área

    Role para ampliar; arraste para mover para o local exato que você deseja amostrar.

  3. 3

    Clique em um pixel

    Leitura instantânea em HEX, RGB, HSL, além de uma amostra ampliada.

  4. 4

    Copie a notação que você precisa

    Um clique copia HEX, rgb() ou hsl() para sua área de transferência.

  5. 5

    Salve várias amostras

    Colete uma paleta de 6-10 cores de toda a imagem para referência de design.

Obtendo amostras precisas

Um seletor de cor de pixel único quase nunca é o que você deseja de uma foto real, a compressão JPEG, ruído e variação de iluminação criam variação de pixel para pixel mesmo em uma área visualmente uniforme.

Modos de amostragem

Modo O que faz Quando usar
Ponto Pixel único sob o cursor Amostragem de uma captura de tela de uma ferramenta de design
3 × 3 média Média de 9 pixels ao redor do clique Fotos JPG com leve compressão
10 × 10 média Média de 100 pixels Fotos fortemente comprimidas ou ruidosas
Média de área Desenhe um retângulo, média de cada pixel dentro Logotipos e ativos de design de cor plana

Avisos sobre espaço de cor

  • Capturas de tela de um display mostram valores sRGB; a cor escolhida corresponde à fonte original.
  • Fotografias de uma câmera podem estar em Adobe RGB ou DCI-P3; o seletor mostra sRGB, então um vermelho vívido de uma foto de telefone de amplo espectro parece ligeiramente dessaturado.
  • PNG com perfil ICC: o seletor converte para sRGB antes da amostragem, então as saídas são consistentes.

Casos de uso comuns

  • Correspondendo à cor do logotipo de um cliente a partir de uma captura de tela em vez de adivinhar.
  • Construindo uma paleta a partir de uma foto de referência (paisagem, mood board, still de filme).
  • Verificando valores hex em uma página da web renderizada que perdeu seus tokens de design.
  • Verificando se uma cor de marca foi aplicada corretamente por um interessado.

Privacidade

A imagem é carregada na tela do seu navegador e nunca é enviada, o seletor usa apenas leituras de canvas do lado do cliente, então designs confidenciais permanecem confidenciais.

Perguntas frequentes

A compressão JPEG desloca ligeiramente as cores, especialmente em gradientes e perto de bordas. Se a fonte for um JPG, tente o modo de média de 10 × 10; se você tiver acesso ao PNG ou SVG original, amostre a partir disso para uma correspondência exata.

Não diretamente. Faça uma captura de tela do quadro que você deseja e carregue isso. Para um trabalho rigoroso de vídeo para paleta, extraia quadros com uma ferramenta de vídeo e amostre cada um.

Ele amostra do quadro que está sendo exibido quando você clica. Pause ou arraste para o quadro que você deseja antes de amostrar.

Até 20 por sessão. As paletas são armazenadas localmente, então atualizar a página as mantém, mas limpar os dados do navegador as apaga.

Ferramentas relacionadas