As imagens enviadas são salvas em um servidor?

Não, elas não são salvas. Todo o processamento de imagem e algoritmos de extração de cores são executados usando a API Canvas no seu navegador (ambiente local). Os dados da imagem nunca são enviados para servidores externos pela internet, para que você possa usá-la com segurança, mesmo para imagens altamente sensíveis.

Quais formatos de imagem são suportados?

Suporta formatos de imagem da web comuns: JPG, PNG, GIF, WebP e SVG. O limite de tamanho do arquivo é de até 10MB, o que garante capacidade suficiente para a maioria dos casos de uso.

Quão precisas são as cores extraídas?

Como ele lê os dados do pixel diretamente no Canvas, você pode obter cores 100% precisas (no espaço sRGB) no nível do pixel. Além disso, usando as teclas de seta do teclado após clicar, você pode selecionar e extrair com precisão até sutis diferenças de cor em pixels adjacentes.

As cores CMYK podem ser usadas diretamente para impressão?

Os valores CMYK fornecidos por esta ferramenta são valores teóricos baseados em cálculos aproximados de valores RGB. Para impressão profissional (DTP), eles dependem de perfis de cores (como o Japan Color), portanto, é recomendável usá-los apenas como valores de referência e realizar verificações finais com softwares dedicados como o Illustrator.

🎨

image color picker,

Seletor de Cores de Imagem

Extraia cores exatas de imagens instantaneamente.
Extraia automaticamente paletas de cores dominantes e ajuste com o teclado.

🔍

Extração Perfeita de Pixels

Obtenha com precisão as cores dos pixels com uma lupa e as teclas de seta

🎨

Análise de Cores Dominantes

Extraia automaticamente as 8 principais cores representativas da imagem

📋

5 Formatos de Cor

Suporta HEX, RGB, HSL, CMYK e o moderno OKLCH

🖼️

Arraste e Solte a Imagem

ou clique para selecionar arquivo / Ctrl+V para colar

JPG PNG GIF WebP SVG Máx 10MB

* As imagens são processadas localmente no seu navegador e nunca são enviadas a um servidor.

✅ Copiado!

Gerador de CSS View Transition

🎨

Conversor de Cores

↔️

Gerador de CSS Clamp

about,

Sobre o Seletor de Cores de Imagem

O Seletor de Cores de Imagem é uma ferramenta online gratuita que permite extrair informações específicas de cores de imagens, fotos e ilustrações, fornecendo códigos de cores como HEX, RGB, HSL, CMYK e OKLCH. Com processamento avançado do lado do cliente usando a API Canvas do navegador, as imagens enviadas nunca são enviadas para servidores externos, garantindo uma operação segura e rápida.

É altamente útil para web designers e engenheiros de front-end investigarem as cores principais de designs de referência ou criarem paletas de cores que correspondam ao clima das fotos. Além da extração de cores perfeita em pixels usando a ferramenta seletor de cores, ele também possui uma função de extração automática para analisar as cores dominantes de toda a imagem.

how to,

Como Usar

STEP 1

Fazer upload de uma imagem

Arraste e solte a imagem da qual você deseja extrair cores na área superior ou clique para selecionar um arquivo. Ele também suporta a colagem a partir da área de transferência (Ctrl+V / Cmd+V). O carregamento é instantâneo e processado no seu navegador.

STEP 2

Escolher uma cor específica com o seletor de cores

Selecione a aba "Seletor de Cores" e clique na área da imagem que deseja verificar. Uma lupa aparecerá, permitindo que você atinja com precisão pequenos pixels. Após clicar, você também pode fazer ajustes finos pixel por pixel usando as setas do teclado (↑↓←→).

STEP 3

Extrair automaticamente as cores dominantes

Mude para a aba "Extração Automática" para analisar e gerar automaticamente uma paleta das 8 principais cores representativas (cores dominantes) usadas com mais frequência na imagem. Ao clicar em "Copiar Vars CSS" desta paleta, você pode colar e usar diretamente na folha de estilo do seu projeto.

glossary,

Glossário do Seletor de Cores de Imagem

HEX (Código de Cor Hexadecimal): O método de representação de cores mais comumente usado em web design. Ele representa os valores de vermelho, verde e azul em hexadecimal de 00 a FF, expresso como uma string de 6 caracteres como #FF5733. É essencial para especificar cores em HTML e CSS.
OKLCH: Um método moderno de definição de cores CSS usando um espaço de cores perceptualmente uniforme. Composto por Lightness (Luminosidade), Chroma (Croma) e Hue (Matiz), ele corresponde mais às características visuais humanas do que o HSL tradicional, oferecendo a vantagem de criar facilmente paletas de cores com taxas de contraste consistentes.
Cor Dominante: A cor primária que prevalece em uma imagem ou design e determina sua impressão geral. Esta ferramenta usa o algoritmo Median Cut para analisar a imagem e extrair automaticamente as 8 principais cores de maior impacto visual.
Algoritmo Median Cut: Um tipo de algoritmo frequentemente usado para quantização de cores de imagens. Ele gera eficientemente uma paleta de cores representativa, colocando todos os pixels em um espaço de cor RGB 3D e dividindo repetidamente o espaço ao longo do eixo de cor com a maior variação.
Paleta de Cores: Uma combinação de cores usada em um design. É um conjunto de cores que define uma cor base, cor de destaque, etc., para alcançar um design coeso e unificado.

faq,

Perguntas Frequentes

Q.As imagens enviadas são salvas em um servidor?: Não, elas não são salvas. Todo o processamento de imagem e algoritmos de extração de cores são executados usando a API Canvas no seu navegador (ambiente local). Os dados da imagem nunca são enviados para servidores externos pela internet, para que você possa usá-la com segurança, mesmo para imagens altamente sensíveis.
Q.Quais formatos de imagem são suportados?: Suporta formatos de imagem da web comuns: JPG, PNG, GIF, WebP e SVG. O limite de tamanho do arquivo é de até 10MB, o que garante capacidade suficiente para a maioria dos casos de uso.
Q.Quão precisas são as cores extraídas?: Como ele lê os dados do pixel diretamente no Canvas, você pode obter cores 100% precisas (no espaço sRGB) no nível do pixel. Além disso, usando as teclas de seta do teclado após clicar, você pode selecionar e extrair com precisão até sutis diferenças de cor em pixels adjacentes.
Q.As cores CMYK podem ser usadas diretamente para impressão?: Os valores CMYK fornecidos por esta ferramenta são valores teóricos baseados em cálculos aproximados de valores RGB. Para impressão profissional (DTP), eles dependem de perfis de cores (como o Japan Color), portanto, é recomendável usá-los apenas como valores de referência e realizar verificações finais com softwares dedicados como o Illustrator.

use cases,

Casos de Uso

🎨

Web Design e Codificação

Extraia cores de marca precisas (HEX/RGB) de capturas de tela de sites de referência ou imagens de logotipos fornecidas por clientes e aplique-as ao CSS. Usando o recurso de extração automática, você pode identificar instantaneamente candidatos a cores base, cores principais e cores de destaque.

🖼️

Esquemas de Cores de UI Combinando com Fotos

Extraia cores dominantes de imagens em miniatura de artigos ou fotos colocadas em cabeçalhos. Ao definir essas cores como cores de fundo para texto ou botões, você pode obter designs de página bonitos onde as imagens e a interface do usuário se harmonizam.

✨

Criação de Paletas de Cores para Ilustrações

Extraia combinações de cores impressionantes (paletas de cores) de obras de ilustradores favoritos ou belas fotos de paisagens. Copie as cores extraídas em massa como variáveis CSS e utilize-as como ideias de esquema de cores para seus próprios trabalhos originais.

📸

Cores de Referência para Retoque e Correção de Fotos

Ao editar fotos, obtenha informações de cores com precisão de áreas específicas, como tons de pele ou cores do céu, no nível do pixel. Utilize-os como linha de base para ajuste de balanço de branco e gradação de cores.