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

Farbpipette für Bilder

Bild ablegen, beliebigen Pixel anklicken, Hex/RGB/HSL erhalten - und nebenbei eine Farbpalette aufbauen.

Läuft in deinem Browser

Bild ablegen und mit dem Cursor schweben - die Vorschau zeigt Live-Farbe und Hex des Pixels unter dem Zeiger. Klick speichert diesen Pixel als Probe (Hex / RGB / HSL). Bis zu 20 Proben stapeln sich; einzeln kopieren, oder die ganze Palette als CSS-Variablen-Block. Nichts wird hochgeladen.

Bild hier ablegen oder klicken zum Auswählen

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

So funktioniert's

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.

Was ist das?

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.

Wann verwenden

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.

Häufige Fehler

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

Farbkonverter (HEX, RGB, HSL)

Konvertiere Farben zwischen HEX, RGB, HSL und OKLCH.

Farbpaletten-Generator

Komplementäre, analoge, triadische, tetradische und monochrome Paletten aus jeder Basisfarbe erzeugen.

Kontrast-Prüfer

WCAG-Kontrast-Prüfer mit Live-Verhältnis, AA/AAA-Badges und Beispieltext.