Seletor de Cores de Imagem

Seletor de cores de imagem: selecione uma cor exata e uma paleta

Use este seletor de cores de imagem para obter valores exatos de uma foto local, captura de tela, ilustração ou captura de interface. Cada clique na pré-visualização mapeia o pixel exato da origem e retorna seus valores HEX, RGB, HSL, alfa e coordenadas, de modo que funciona como um seletor de cores de imagem e um seletor de cores hex de imagem para tarefas de imagem para HEX, código hex de imagem e obtenção de código de cor de imagem, sem a necessidade de upload para o servidor. O mesmo fluxo de trabalho serve como um seletor de cores de foto, seletor de cores de figura, conta-gotas de imagem ou seletor de cores de imagem.

Como obter um código HEX de uma imagem

1. Escolha, arraste ou cole uma imagem local, ou comece com a amostra incluída.
2. Clique ou toque em um pixel, ou insira as coordenadas de origem exatas e use a lupa para um controle no nível do pixel.
3. Copie o código HEX da imagem, escolha uma cor dominante da paleta ou exporte a paleta como variáveis CSS ou tokens JSON.

Amostragem exata de pixels com coordenadas de origem

O canvas dimensionado nunca altera o sistema de coordenadas de origem. Controles de ponteiro, toque, teclado e coordenadas numéricas fazem a amostragem a partir da imagem de origem decodificada pelo navegador. A lupa usa renderização por vizinho mais próximo para que o pixel central permaneça visível, incluindo pixels transparentes e parcialmente transparentes.

Crie uma paleta de cores a partir de uma imagem

O resultado da paleta de cores da imagem é extraído de uma subamostragem delimitada em um 'browser worker', de modo que imagens grandes não exigem uma var

Próximos passos: verificar o contraste desta paleta em relação aos limites da WCAG, ou transformar uma cor amostrada em uma paleta completa com tons claros, escuros e valores do Tailwind.

Saída em HEX, RGB, HSL, CSS e JSON

Um pixel amostrado pode ser copiado como HEX ou HEXA, RGB ou RGBA e HSL ou HSLA. A paleta dominante pode ser copiada ou baixada como variáveis CSS para uma página web ou como tokens de cor JSON para um sistema de design. GIFs animados usam o quadro decodificado pelo navegador, e os valores exibidos podem diferir de outro aplicativo quando o tratamento do perfil de cor é diferente.

Processamento de imagem local e privado

A decodificação da imagem, amostragem de pixels, ampliação, extração de paleta e exportação acontecem localmente neste navegador. A ferramenta não possui campo para URL remota e não envia conteúdo da imagem, nomes de arquivo, dimensões, coordenadas, cores exatas, paletas ou arquivos gerados para analytics. Substituir uma imagem libera a URL do objeto local anterior.

Perguntas frequentes

Como eu escolho uma cor de uma imagem?

Abra, arraste ou cole uma imagem, depois clique ou toque no pixel que você deseja. A ferramenta mostra a coordenada exata da origem e os valores correspondentes de HEX, RGB, HSL e alfa.

Posso obter uma paleta de cores de uma foto?

Sim. Depois que a imagem é decodificada, o navegador extrai seis cores dominantes determinísticas. Escolha qualquer amostra, copie a paleta ou baixe as variáveis CSS ou os tokens JSON.

Pixels transparentes são suportados?

Sim. A amostragem exata de pixels preserva o alfa e identifica um pixel totalmente transparente. A extração da paleta ignora pixels totalmente transparentes e pondera os pixels parcialmente transparentes pelo seu alfa.

É feito o upload da minha imagem?

Não. Sua imagem é decodificada e inspecionada localmente neste navegador. Não há API de upload de imagem ou busca de URL remota, e os dados da imagem são excluídos do analytics.

Por que outro aplicativo pode mostrar uma cor ligeiramente diferente?

Navegadores e aplicativos gráficos podem lidar com perfis de cores incorporados, quadros de animação e arredondamento de conversão de maneiras diferentes. Esta ferramenta reporta os pixels produzidos pelo decodificador do seu navegador.