How do I pick a color from an image?

Upload an image using the button above, drag and drop a file, or paste a screenshot with Ctrl+V. Once loaded, move your cursor over the image and click on any pixel to lock its color. The magnifier loupe shows a zoomed-in view so you can pick colors with precision.

Can I pick a color from a screenshot?

Yes. Take a screenshot and press Ctrl+V (or Cmd+V on macOS) anywhere on the page. The image color picker automatically pastes it onto the canvas so you can immediately start sampling colors from it.

Does the image get uploaded to a server?

No. All image processing happens entirely in your browser using the HTML5 Canvas API. Your images and color data never leave your device, and nothing is stored on any server.

What color formats does the tool provide?

The tool provides HEX, RGB, HSL, HSV, OKLCH, and CMYK color values for every sampled pixel. You can copy any format with one click or export all values at once.

What is the difference between HEX, RGB and HSL?

HEX is a six-character code used in HTML and CSS to represent colors. RGB defines a color by its red, green, and blue channel values. HSL stands for Hue, Saturation, and Lightness, making it easier to adjust a color's warmth or brightness intuitively.

Can I pick colors from a high-resolution image?

Yes. The image color picker supports images of any resolution. You can zoom in up to 3200% to see individual pixels clearly, making it easy to pick exact colors even from very large or detailed images.

Why can neighboring pixels have different colors?

Digital images often have slight color variations between neighboring pixels due to JPEG compression, anti-aliasing at edges, or camera sensor noise. This is normal. The tool offers 3x3, 5x5, and 11x11 area sampling to average out these variations when needed.

What is color sampling?

Color sampling is the process of reading the color value of one or more pixels from an image. Point sampling reads a single pixel, while area sampling averages a grid of pixels (such as 3x3 or 5x5) to give a more representative color, which is useful for photographs and textured surfaces.

Can I extract a color palette from an image?

Yes. The palette extractor analyzes your image and returns its dominant colors in modes like Dominant, Vibrant, Muted, and Balanced. You can export the palette as CSS variables, JSON, SVG, or a downloadable PNG card.

Can I use the tool on mobile?

Yes. The image color picker works on modern mobile browsers. You can upload photos from your gallery or paste screenshots directly on your phone or tablet.

Does the tool work with PNG, JPG and WebP images?

Yes. The tool supports PNG, JPG, JPEG, WebP, GIF, and SVG image formats. You can also load images directly from a public URL.

How accurate is the color picker?

The color picker reads the exact sRGB pixel values stored in the image file, so the colors are as accurate as the source data. Any perceived difference between screens is usually caused by display calibration, color profile settings, or brightness differences between devices.

Seletor de Cor de Imagem – Escolha Cores de Qualquer Imagem

Image Color Picker – Upload & Pick Colors

Carregue uma imagem, amplie qualquer pixel e obtenha instantaneamente HEX, RGB, HSL e muito mais. Tudo é processado localmente no seu navegador.

drag & drop•Ctrl + V para colar•

Ou teste instantaneamente com imagens de exemplo:

🔒 Tudo é processado localmente no seu navegador. Zero armazenamento em servidor.

#171717

Cor CSS Mais Próxima: Black

HEX#171717

RGBrgb(23, 23, 23)

HSLhsl(0, 0%, 9%)

Propriedades da Cor:Hue: 0° (Red)Saturation: 0%Lightness: 9%Neutral

Verificador de Contraste WCAGWCAG 2.1

Calcula relações de contraste de acessibilidade para a cor de fundo selecionada contra branco e preto.

Best: White (18.2 : 1)

Texto Branco (#FFFFFF)18.20 : 1

Pré-visualização de título grande (18pt / 24px)

Pré-visualização de corpo de texto de 14px padrão. A relação de contraste determina a legibilidade para usuários com baixa visão.

AA Normal

AA Large

AAA Normal

AAA Large

Texto Preto (#000000)1.15 : 1

Pré-visualização de título grande (18pt / 24px)

Pré-visualização de corpo de texto de 14px padrão. A relação de contraste determina a legibilidade para usuários com baixa visão.

AA Normal

AA Large

AAA Normal

AAA Large

Harmonias de Cor

Paletas harmônicas derivadas matematicamente da cor ativa. Clique em qualquer amostra para selecioná-la.

Paleta de Imagem Extraída

Deriva uma paleta de cores autêntica da sua imagem carregada usando quantização de cor do lado do cliente.

Cores:

Opções de Exportação:

Histórico de Cores Recentes0

Salvo localmente no armazenamento do seu navegador. Nunca enviado para nenhum servidor.

Nenhuma cor selecionada ainda. Clique em qualquer lugar da imagem para registrar cores aqui.

Guia do Usuário e Referência

Tudo Que Você Precisa Saber Sobre Seleção de Cor de Imagem

Um guia abrangente sobre espaços de cores, amostragem de precisão, acessibilidade de contraste e processamento do lado do cliente.

1Como Escolher Uma Cor de Qualquer Imagem

1. Carregue Sua ImagemDrag and drop any PNG, JPG, WebP, GIF, or SVG file, paste directly from clipboard (<kbd class="px-1 py-0.5 rounded bg-white dark:bg-[#2a2a2a] border border-[#d1d5db] dark:border-[#2e2e2e]">Ctrl+V</kbd>), or enter a public image URL.

2. Amplie e AmostreUse mouse wheel or toolbar buttons to zoom in up to 3200%. The magnifier loupe displays a 9×9 real-time pixel grid. Hover over any target pixel and click to lock.

3. Copie e ExporteInstantly copy color codes in HEX, RGB, HSL, HSV, OKLCH, or CMYK. Extract authentic palettes and export to CSS, JSON, SVG, or high-res PNG cards.

2Entendendo a Amostragem de Cor de Imagem (1×1 vs 3×3 vs 5×5)

Em imagens digitais, pixels individuais frequentemente variam ligeiramente devido à compressão JPEG com perda, suavização em bordas vetoriais ou ruído natural do sensor da câmera. Os modos de amostragem dão controle completo sobre como as cores dos pixels são medidas:

1×1 Pixel Único (Amostragem Pontual)

Lê a cor RGB exata do único pixel sob o cursor. Ideal para mockups de UI planos, arte vetorial, pixel art e logotipos digitais onde as bordas são nítidas e as regiões de cor são uniformes.

Médias de Área 3×3 e 5×5

Amostra uma matriz quadrada (9 ou 25 pixels) centrada no seu cursor e calcula a cor representativa. A Média calcula a média aritmética nos canais de cor, enquanto a Mediana filtra ruído e granulação. Ideal para fotografias e materiais texturizados.

3Espaços e Modelos de Cor Comparados

Formato	Exemplo	Caso de Uso Principal
HEX	#0070F3	Design web universal, HTML, folhas de estilo CSS, tokens de interface.
RGB	rgb(0, 112, 243)	Hardware de exibição em tela, APIs Canvas, manipulação de opacidade CSS rgba().
HSL	hsl(212, 100%, 48%)	Ajustes intuitivos para humanos: ajuste facilmente luminosidade ou saturação sem mudar o matiz.
HSV / HSB	hsv(212, 100%, 95%)	Seletores de cor Figma, Sketch, Adobe Photoshop.
OKLCH	oklch(0.58 0.22 254.2)	Padrão moderno CSS Color 4 com uniformidade perceptual em luminosidade e croma.
CMYK	cmyk(100%, 54%, 0%, 5%)	Produção de impressão offset comercial e digital física.

🔒Política de Privacidade – Seletor de Cor de Imagem

Diferente de muitos seletores de cor online que carregam suas imagens pessoais em servidores remotos, o Image Color Picker processa 100% dos seus dados diretamente no seu navegador usando a API Canvas HTML5 nativa e TypedArrays JavaScript.

Suas imagens nunca saem do seu computador ou smartphone local.
Sem contas de usuário, tokens de rastreamento ou bancos de dados do lado do servidor.
Funciona completamente offline uma vez que a página é carregada no seu navegador.

Escolha Qualquer Cor de Qualquer Imagem.