Farbwähler & Paletten-Extraktor – Farben aus Bild auswählen

Lade ein beliebiges JPG, PNG, WebP oder GIF hoch und klicke an eine beliebige Stelle des angezeigten Bildes – der exakte Pixel unter deinem Cursor wird abgetastet und als HEX, RGB und HSL angezeigt, jeweils mit Ein-Klick-Kopierfunktion. Perfekt, um eine Markenfarbe zu treffen, einen Farbton aus einem Foto zu entnehmen oder Akzentfarben aus einem Design-Mockup zu greifen.

Klicken Sie auf ein beliebiges Pixel, und dieses Farbwähler-Tool zeigt dessen HEX-Farbcode (zum Beispiel #FF6B35) zusammen mit RGB und HSL an – dieselben HTML/CSS-Farbcodes, die Sie direkt in ein Stylesheet, ein Design-Token oder ein HTML-Attribut einfügen. Klicken Sie auf „Kopieren“, um den Hex-Code mit einem Klick zu übernehmen.

Das Bild wird auf 320 Pixel an seiner längsten Seite herunterskaliert, dann wird jeder Pixel anhand seiner obersten 4 Bit pro Kanal in Behälter einsortiert. Die am stärksten gefüllten Behälter werden auf volle 8-Bit-Farbe gemittelt, nach Häufigkeit sortiert und als deine Palette zurückgegeben. Das Ergebnis sind typischerweise 5 bis 24 dominante Farben, die das Bild optisch zusammenfassen.

Ja. Die Download-Schaltflächen erzeugen zwei Formate: einen CSS-Variablenblock, der direkt in einen :root-Selektor eingefügt werden kann (--color-1, --color-2…), und eine JSON-Datei mit Hex-, RGB-Komponenten und Gewichtungsprozentsatz für jede Farbe. Beide Formate lassen sich sauber in Design-Tokens, Tailwind-Konfigurationen und Palettenbibliotheken integrieren.

Nein – die Farbauswahl und die Paletten-Extraktion erfolgen vollständig in deinem Browser über die HTML-Canvas-API. Das Bild bleibt auf deinem Gerät, wodurch das Tool sicher für unveröffentlichte Produktfotos, Mockup-Entwürfe und Markenassets unter NDA ist.

Für die Markenidentität sind 5–8 Farben der ideale Bereich – sie erfassen das dominierende Thema, ohne die Akzentwahl zu verwässern. Für Datenvisualisierungen empfehlen wir 10–16 Farben, damit du genügend kategorische Farbtöne hast. Mit dem Schieberegler wählst du zwischen 5 und 24.

Pixel mit einem Alphawert unter 128 werden ignoriert, sodass transparente Hintergründe die Palette nicht mit „Hintergrund“-Farben verunreinigen. Das macht die Bild-Farbpipette besonders gut geeignet für Produktfreisteller, Sticker-Artwork und freigestellte Motive.

HEX (#RRGGBB) ist die kompakteste Form und das, was CSS, Figma und Sketch standardmäßig verwenden. RGB zeigt die drei Komponentenwerte von 0–255 – nützlich beim programmatischen Arbeiten mit Bilddaten. HSL (Farbton, Sättigung, Helligkeit) ist intuitiv zum Anpassen von Farben: Verschiebe den Farbton, um die Farbfamilie zu ändern, passe die Helligkeit für hellere und dunklere Nuancen an.

Ja. Kostenlos, kein Konto erforderlich, keine Beschränkung der Bildgröße oder der Anzahl extrahierter Paletten. Es muss nichts installiert werden – das gesamte Tool ist eine einzige Webseite.

Kein Bild erforderlich. Die Farbauswahl & der Farbkreis oben funktionieren eigenständig – ziehe das Sättigungs-/Helligkeitsquadrat und den Farbtonregler oder gib einen beliebigen HEX-, RGB- oder HSL-Wert ein, um eine exakte Farbe einzustellen. Das Hochladen eines Bildes ist optional, nur um Farben mit der Pipette aus einem Foto zu picken.

Wähle deine Grundfarbe, und das Panel „Farbharmonien“ erstellt sofort komplementäre, analoge, triadische, geteilt-komplementäre, tetradische und monochromatische Schemata auf Basis der Farbkreis-Theorie. Klicke auf eine beliebige Farbprobe, um ihren HEX-Code zu kopieren.

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

Klicke auf Random in Color Picker & Wheel, um zu einer neuen Farbe zu springen, und nutze dann das Panel Color harmonies darunter, um komplementäre, analoge, triadische und andere abgestimmte Paletten zu dieser Farbe zu sehen — ein schneller Weg zu einem Ausgangspunkt, wenn du von Grund auf gestaltest, statt eine bestehende Abbildung auszulesen.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.