Why does the colour change when I move the cursor?

JPGs compress neighbouring pixels into blocks, so two pixels that look identical to the eye can actually carry slightly different values. Photos also have natural texture (skin, fabric, foliage) - sampling one pixel from a photo isn't the same as 'the average colour of that region'. Click and compare multiple nearby pixels if the result feels off.

Can I sample from a screenshot?

Yes - that's what this tool is best at. Screenshots typically have flat colour regions (UI fills, brand colours, logo backgrounds), so a single click reliably gives you the canonical hex. PNG screenshots are lossless; JPG screenshots can have compression noise on solid fills.

Standard sRGB-to-HSL conversion - the same one CSS uses internally. Hue is in degrees (0-360), saturation and lightness are percentages. The hex value is canonical; HSL is for designers who think in terms of 'a darker version of this' or 'the opposite hue'.

Seletor de cor de imagem

Solte uma imagem, clique em qualquer pixel para obter hex, RGB e HSL - e monte uma paleta enquanto seleciona.

Roda no seu navegador

Solte uma imagem e passe o cursor - a pré-visualização mostra ao vivo a cor e o hex do pixel sob o ponteiro. Clique para fixar esse pixel como amostra (hex / RGB / HSL visíveis). Até 20 amostras se empilham; copie uma, ou copie a paleta inteira como bloco de variáveis CSS. Nada sai do navegador.

Solte uma imagem aqui ou clique para escolher

PNG, JPG, WebP, AVIF, GIF, SVG, BMP

Como usar

Drop an image
Drag-and-drop or click the dropzone to pick a screenshot, logo or photo.
Hover for a live preview
The colour and hex of the pixel under the cursor show in real time.
Click to capture
Each click adds a swatch to the palette (hex / RGB / HSL all visible).
Copy the palette
Click any swatch to copy its hex, or copy the entire palette as a CSS variable block.

O que é?

An image color picker reads the RGB value of any pixel in an uploaded image. The browser's Canvas API gives us the raw pixel data; we convert it to the three formats designers actually use (hex for code, RGB for paint software, HSL for relative reasoning). Combined with a save-as-swatch UX, it becomes a fast way to extract a brand's exact palette from a screenshot, photo or competitor's site.

Quando usar

Recovering a brand's exact hex values from a logo screenshot, sampling a photograph's dominant colours for a design moodboard, matching a UI element's exact colour from an old screenshot when the source is lost, or finding the perfect accent colour from a stock photo for a landing page hero.

Erros comuns

Sampling a JPG and being surprised at the noise - JPG block compression means a single pixel doesn't represent its visual neighbourhood. Sampling a photograph and treating the result as 'the brand colour' - photos have natural variation; the brand colour lives in a flat-fill source. And forgetting that two adjacent pixels at the edge of a logo can differ wildly because of anti-aliasing.

FAQ

Why does the colour change when I move the cursor?: JPGs compress neighbouring pixels into blocks, so two pixels that look identical to the eye can actually carry slightly different values. Photos also have natural texture (skin, fabric, foliage) - sampling one pixel from a photo isn't the same as 'the average colour of that region'. Click and compare multiple nearby pixels if the result feels off.
Can I sample from a screenshot?: Yes - that's what this tool is best at. Screenshots typically have flat colour regions (UI fills, brand colours, logo backgrounds), so a single click reliably gives you the canonical hex. PNG screenshots are lossless; JPG screenshots can have compression noise on solid fills.
How is HSL computed?: Standard sRGB-to-HSL conversion - the same one CSS uses internally. Hue is in degrees (0-360), saturation and lightness are percentages. The hex value is canonical; HSL is for designers who think in terms of 'a darker version of this' or 'the opposite hue'.

Conversor de Cores (HEX, RGB, HSL)

Converta cores entre HEX, RGB, HSL e OKLCH.

Gerador de paleta de cores

Gere paletas complementares, análogas, triádicas, tetrádicas e monocromáticas a partir de qualquer cor base.

Verificador de contraste

Verificador de contraste WCAG com proporção ao vivo, selos AA/AAA e texto de exemplo.