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'.

Pipette couleur sur image

Déposez une image, cliquez sur n'importe quel pixel pour obtenir son hex, RGB et HSL - et construisez une palette en avançant.

Fonctionne dans votre navigateur

Déposez une image et survolez avec le curseur - l'aperçu montre en direct la couleur et le hex du pixel sous le pointeur. Cliquez pour enregistrer ce pixel comme échantillon (hex / RGB / HSL visibles). Jusqu'à 20 échantillons s'empilent ; copiez l'un d'eux, ou toute la palette en bloc de variables CSS. Rien n'est envoyé.

Déposez une image ici ou cliquez pour en choisir une

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

Comment l'utiliser

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.

Qu'est-ce que c'est ?

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.

Quand l'utiliser

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.

Erreurs courantes

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'.

Convertisseur de couleurs (HEX, RGB, HSL)

Convertissez les couleurs entre HEX, RGB, HSL et OKLCH.

Générateur de palette de couleurs

Générez des palettes complémentaires, analogues, triadiques, tétradiques et monochromatiques à partir de toute couleur de base.

Vérificateur de contraste

Vérificateur de contraste WCAG avec ratio en direct, badges AA/AAA et texte d'exemple.