Farbpalette aus Bild
Lade ein beliebiges Foto hoch, füge es ein oder verlinke es und erhalte seine dominanten Farben als fertige Palette – mit unbegrenztem kostenlosem Export als CSS-Variablen, SCSS, Tailwind, JSON oder PNG-Farbtafel. Dein Bild verlässt nie deinen Browser.
Bild hier ablegen
oder mit Strg+V einfügen
Was „dominante Farben“ wirklich bedeutet
Frag fünf Werkzeuge nach der Palette eines Bildes und du bekommst fünf Antworten – denn „die“ Palette gibt es nicht, sie muss berechnet werden, und die Methode macht den Unterschied. Dieser Extraktor verdichtet das Foto zuerst zu einem kompakten Farbhistogramm und gruppiert diese Farben dann mit einem k-Means-Algorithmus in OKLab, einem wahrnehmungsgleichabständigen Farbraum. Dass die Abstände beim Clustern der menschlichen Wahrnehmung entsprechen, ist der entscheidende Kniff: Das Orange eines Sonnenuntergangs und sein Rosa bleiben zwei Farbfelder, statt zu einem matschigen Lachston gemittelt zu werden – und Nuancen, die dein Auge ohnehin nicht unterscheidet, bekommen erst gar keine zwei Palettenplätze.
Jedes Farbfeld nennt außerdem seinen Flächenanteil – wie viel des Bildes zu diesem Cluster gehört. Das ist oft nützlicher als die Farbe selbst: Das Feld mit 55 % ist dein Kandidat für den Hintergrund, der Akzent mit 3 % ist das, was das Foto zum Leuchten bringt.
So wird die Palette wirklich brauchbar
- Vorher zuschneiden. Wenn du die Palette des Kleides willst und nicht die der Straße dahinter, schneide das Foto zuerst zu – der Extraktor gewichtet jedes einzelne Pixel.
- Die Anzahl zum Motiv passen lassen. Minimalistische Interieurs und Poster wirken mit 4–6 Farben; unruhige Landschaften brauchen ehrlicherweise manchmal 12.
- Achtung, Weißabgleich. Ein Foto unter warmem Glühlicht brennt in jedes Farbfeld einen Orangestich ein. Korrigiere das Foto zuerst, wenn du die „echten“ Objektfarben brauchst.
- Mit dem Auge entdoppeln. Wenn zwei Farbfelder gleich aussehen, extrahiere weniger Farben – der Unterschied zwischen ihnen ist rechnerisch echt, praktisch aber wertlos.
Vom Foto zum Design-System
Die Export-Schaltflächen liefern Formate, die du direkt in ein Projekt übernehmen kannst: CSS Custom Properties für schlichte Websites, SCSS-Variablen für ältere Pipelines, ein Tailwind-Fragment für theme.extend.colors, maschinenlesbares JSON oder eine PNG-Farbtafel für Moodboards und Kundenpräsentationen. Alle Exporte sind kostenlos und unbegrenzt – kein Konto, kein Wasserzeichen, keine „Pro“-Hürde. Einzelne Farbfelder wandern auf Wunsch in Meine Farben, die Ablage, die alle Werkzeuge dieser Seite gemeinsam nutzen – so testest du ein Farbpaar sofort im Kontrast-Checker oder stellst zwei extrahierte Nuancen im Vergleichswerkzeug nebeneinander.
Ein Wort zum Datenschutz
Paletten-Extraktion ist genau die Art Funktion, die sonst „lade dein Bild auf unseren Server“ bedeutet. Hier nicht: Histogramm und Clustering laufen in einem Hintergrund-Thread deines eigenen Browsers, und das Foto verlässt dein Gerät nie. Unveröffentlichte Produktfotos, Kundenarbeit unter Geheimhaltung, Familienbilder – alles sicher durch die Bauweise, nicht durch ein Versprechen.
Wenn du stattdessen ein einzelnes Pixel brauchst
Eine Palette fasst zusammen; manchmal brauchst du aber die exakte Farbe einer ganz bestimmten Stelle. Nimm dafür den Farbwähler für Bilder auf der Startseite – er vergrößert bis auf Pixelebene und liest den genauen Wert unter einer Lupe aus, mit denselben Datenschutzgarantien.
Häufige Fragen
Wie funktioniert die Paletten-Extraktion?
Das Bild wird zu einem Farbhistogramm abgetastet und dann mit k-Means im wahrnehmungsbasierten Farbraum OKLab geclustert – gewichtet danach, wie viele Pixel jede Farbe abdeckt. Das Ergebnis sind die Farben, die das Bild visuell dominieren, nicht bloß die häufigsten exakten Pixelwerte.
Wird mein Foto für die Paletten-Extraktion hochgeladen?
Nein. Die gesamte Analyse läuft in einem Hintergrund-Thread deines eigenen Browsers. Das Bild verlässt dein Gerät nie.
Warum bekomme ich leicht andere Farben als bei einem anderen Paletten-Tool?
Es gibt nicht die eine „richtige“ Palette – Werkzeuge unterscheiden sich in Abtastung, Farbraum und Clustering. Dieses hier clustert in OKLab und gruppiert Farben damit so, wie es das menschliche Sehen tut. Außerdem ist es deterministisch: Dasselbe Bild ergibt hier immer dieselbe Palette.
Was bedeuten die Prozentwerte?
Den Anteil der analysierten Pixel, der zum Cluster der jeweiligen Farbe gehört – also praktisch, wie viel Bildfläche diese Farbe einnimmt.
Kann ich die Palette für mein Projekt exportieren?
Ja, kostenlos und unbegrenzt: Kopiere CSS Custom Properties, SCSS-Variablen oder ein Tailwind-Konfigurationsfragment – oder lade die Palette als JSON oder als PNG-Farbtafel herunter.
Wie viele Farben soll ich extrahieren?
Fang mit 8 an. Poster und Interieurs kommen oft mit 4–6 aus; detailreiche Fotos mit vielen unterschiedlichen Bereichen rechtfertigen auch 12. Wenn zwei Farbfelder fast gleich aussehen, reduziere die Anzahl.