Was ist der Unterschied zwischen der Palette und der Pipette?

Die Palette zeigt die 6 dominantesten Farben im gesamten Bild — gut zum Extrahieren eines Designsystems aus einem Foto. Die Pipette lässt dich ein exaktes Pixel auswählen — gut zum Abgleichen eines bestimmten Farbtons, zum Verifizieren eines Hex-Werts oder zum Abtasten eines einzelnen Elements.

Warum werden große Bilder herunterskaliert?

Pixelanalyse auf einem 12MP-Foto würde erfordern, 12 Millionen Pixel zu lesen — langsam und speicherintensiv. Herunterskalieren auf 1.600px auf der langen Kante reduziert das auf ~1,5 Millionen Pixel ohne sichtbaren Genauigkeitsverlust für die Palettenextraktion. Die Pipette liest immer noch aus dem herunterskalierten Puffer, sodass Pixelkoordinaten sich darauf beziehen.

Was ist das Format des CSS-Exports?

Die Ausgabe ist ein :root-Block mit nummerierten benutzerdefinierten Eigenschaften, bereit zum Einfügen in jedes Stylesheet. Beispiel: `:root { --color-1: #FF5733; /* orange */ --color-2: #C70039; /* dunkelrot */ ... }`. Jede Eigenschaft enthält den automatisch erkannten Farbnamen als Kommentar.

Sind die Farbnamen genau?

Die Namen kommen von einer HSL-Hue-Bucket-Heuristik (rot, orange, gelb, grün, cyan, blau, violett, pink, plus helle/dunkle Varianten). Sie sind Annäherungen, keine Übereinstimmungen mit benannten Farbdatenbanken. Für eine 'benannte' Farbe wie 'koralle' oder 'türkis' erwarte stattdessen den nächstgelegenen Bucket-Namen.

Unterstützt das Tool transparente Bilder?

Ja. Vollständig transparente Pixel werden während der Palettenextraktion übersprungen. Halbtransparente Pixel werden vor der Abtastung mit Weiß gemischt — das spiegelt wider, wie die Farbe aussieht, wenn sie auf einem typischen weißen Hintergrund angezeigt wird.

Wird mein Bild irgendwohin hochgeladen?

Nein. Alles geschieht sofort. Dein Bild wird in den Speicher dekodiert, analysiert und verworfen — nichts verlässt dein Gerät.

Kann ich Farben auf dem Handy auswählen?

Ja. Die Pipette funktioniert mit Berührung — tippe und ziehe, um die Lupe zu bewegen, hebe deinen Finger, um die Farbe an diesem Punkt zu bestätigen. Für präzises Pixel-Anvisieren auf kleinen Bildschirmen zoome den Browser hinein oder verwende ein größeres Quellbild.

Ad Slot — Header Banner

Pipette + Auto-Palette · 100% Privat

Bild Farbpalette und HEX Extractor

Lade ein beliebiges Foto hoch, um seine dominante Farbpalette zu extrahieren und präzise HEX-, RGB- oder HSL-Werte mit einer interaktiven Pipette auszuwählen. Kopiere einzelne Codes oder lade die gesamte Palette als CSS-Variablen herunter. Alles geschieht sofort — keine Uploads.

#HEX#RGB#HSL#Palette#CSS#Pipette

Bild hier ablegen oder klicken zum Durchsuchen

PNG, JPG, WebP, AVIF, GIF · Einzelne Datei · Sofort analysiert

Lade ein Bild hoch, um seine Palette zu extrahieren

PNG, JPG, WebP, AVIF oder GIF. Die Pipette liefert Präzision auf Pixelebene; die Palette zeigt die 6 dominantesten Farben.

Ad Slot — Below the Fold

So extrahierst du Farben aus einem Bild in 3 Schritten

Dominante Palette + Pipette auf Pixelebene.

Bild hochladen

Lege ein PNG, JPG, WebP, AVIF oder GIF ab. Das Tool reduziert es intern für Geschwindigkeit und führt dann einen Median-Cut-Quantisierer aus, um die 6 dominantesten Farben zu finden.

Bestimmte Pixel auswählen

Schwebe über das Bild, um die Vergrößerungslinse zu aktivieren. Sie zoomt 12× hinein, sodass du einzelne Pixel anvisieren kannst. Klicke auf einen beliebigen Punkt, um diese Farbe in der ausgewählten Farbkarte zu fixieren.

Codes kopieren oder CSS exportieren

Jedes Farbmuster zeigt HEX, RGB und HSL — klicke auf eine beliebige Zeile zum Kopieren. Verwende den CSS Kopieren-Button, um :root-Variablen zum Einfügen in ein Stylesheet zu erhalten, oder CSS Herunterladen für eine .css-Datei.

Häufig Gestellte Fragen

Es verwendet Median-Cut-Quantisierung — ein klassischer Algorithmus, der den Farbraum rekursiv entlang seiner längsten Achse am Median teilt und dann jede resultierende Region mittelt. Das erzeugt eine Palette, die die tatsächliche Farbverteilung des Bildes besser widerspiegelt als naive Histogramm-Abtastung.

Über die Bild Farbpalette und HEX Extractor

Everything you need to know

Warum Paletten aus Bildern extrahieren?

Designer, Entwickler und Vermarkter müssen häufig Farben aus einem Marken-Asset, einer Fotografie oder der UI eines Wettbewerbers abgleichen. Manuelles Farbauswählen ist mühsam und fehleranfällig. Dieses Tool automatisiert die Entdeckung dominanter Farben und bietet Pixel-genaue Abtastung für Präzisionsarbeit — alles in einer Oberfläche. Verwende es, um ein Designsystem aus einem Moodboard zu erstellen, Markenfarben aus einem Logo zu extrahieren oder eine kohärente Palette aus einem Landschaftsfoto zu ziehen.

Die Farbformate verstehen

HEX ist der Standard für Web und Design-Tools — sechs Hexadezimalziffern für Rot, Grün und Blau (z. B. #FF5733). RGB drückt dieselben Werte als Dezimaltriplets aus (255, 87, 51) — besser für programmatische Nutzung. HSL beschreibt Farbton, Sättigung und Helligkeit in menschenlesbaren Begriffen (11°, 100%, 60%) — besser zum Erstellen von Variationen wie '20% dunkler' oder 'gesättigter'. Jedes Farbmuster zeigt alle drei, und jede Zeile ist ein Klick zum Kopieren.

Median-Cut-Quantisierung erklärt

Median-Cut ist ein klassischer Algorithmus von 1980, der Millionen von Farben auf eine kleine repräsentative Auswahl reduziert. Er funktioniert, indem er wiederholt den Farbraum entlang seiner längsten Dimension teilt und Pixel am Medianwert aufteilt. Nach N Teilungen hast du N Regionen; der Durchschnitt jeder Region wird zu einer Palettenfarbe. Das erzeugt wahrnehmungsmäßig ausgewogene Paletten — anders als naives k-means, das in lokalen Minima stecken bleiben kann, oder Histogramm-Ansätze, die visuell ähnliche Cluster bevorzugen.

Datenschutz, Leistung und Browser-Kompatibilität

Alles läuft auf deinem Gerät — dein Bild verlässt niemals deinen Browser. Die Palettenextraktion auf einem typischen 4MP-Foto dauert 100–300ms. Die Pipette liest direkt aus dem In-Memory-Pixelpuffer ohne wahrnehmbare Latenz. Das Tool funktioniert in jedem modernen Browser (Chrome, Firefox, Safari, Edge) und bleibt nach dem ersten Laden offline funktionsfähig.