Eine Farbpalette aus einem Foto erzeugen: standardmäßig 8 Farben, einstellbar von 5 bis 12, jeweils mit Anteil am Bild. Einzelne Farbfelder kopieren oder die ganze Palette als CSS-Variablen, JSON oder PNG für Moodboards und Markenarbeit exportieren.
Anleitung
- Bild öffnen, auf die Karte ziehen oder einen Screenshot mit Strg+V einfügen. Bis dahin wird ein Beispielbild gezeigt.
- Mit dem Mauszeiger über das Bild fahren, um die Lupe zu sehen, und klicken, um das Pixel aufzunehmen. Am Handy den Finger auf dem Bild halten, schieben, bis die Lupe das richtige Pixel zeigt, und loslassen.
- Auf HEX, RGB oder HSL tippen, um die Farbe zu kopieren. Die letzten Farben stehen neben dem großen Farbfeld.
- Die Palette aktualisiert sich von selbst. 5 bis 12 Farben und das Verfahren wählen, auf ein Farbfeld tippen, um es zu kopieren, und die Palette als CSS, JSON oder PNG exportieren.
- k-Means fasst ähnliche Farben zusammen und ergibt meist die natürlichste Palette. Median-Cut teilt den Farbraum gleichmäßig auf und behält kleine Akzentfarben.
- Die Hauptfarbe ist die größte Gruppe der Palette. Der Durchschnitt wird über alle sichtbaren Pixel gebildet und wirkt daher oft gedämpft.
- Große Bilder werden zum Auslesen auf 2400 Pixel an der langen Seite verkleinert, einfarbige Flächen bleiben dabei exakt. Transparente Pixel werden ignoriert.
- Das Bild bleibt in deinem Browser. Es wird nichts hochgeladen.
Ein exaktes Pixel wählen
Mit dem Zeiger über das Bild fahren, die Lupe erscheint, dann klicken. Auf Touchscreens den Finger auflegen, bis zum gewünschten Pixel gleiten und loslassen. Große Bilder werden zum Auswählen auf 2400 px an der langen Seite skaliert, so bleiben Flächenfarben von Logos und Oberflächen exakt. Fotos rauschen, benachbarte Pixel eines Himmels weichen oft um ein paar Werte ab – die Palette liefert dann die repräsentativere Farbe.
So entsteht die Palette
K-Means fasst ähnliche Farben zusammen und ergibt bei Fotos meist die natürlichste Palette. Median Cut teilt den Farbraum gleichmäßig und behält kleine Akzentfarben, gut für Illustrationen und Markenbilder. Jedes Farbfeld zeigt seinen Anteil am Bild.
Die dominante Farbe ist die größte Gruppe. Die Durchschnittsfarbe ist der Mittelwert aller sichtbaren Pixel und deshalb oft ein gedeckter Ton, der im Bild selbst nicht vorkommt. Vollständig transparente Pixel werden ignoriert.
Die Codes verwenden
HEX (#1e88e5) ist das übliche Format für CSS, Designprogramme und Styleguides; RGB beschreibt dieselbe Farbe als Rot, Grün und Blau von 0 bis 255; HSL beschreibt Farbton, Sättigung und Helligkeit und erleichtert hellere oder dunklere Varianten. Die Palette lässt sich als CSS-Variablen, JSON oder PNG-Farbtafel exportieren.
Häufige Fragen
Wie finde ich den Farbcode von etwas in einem Bild?
Bild öffnen, mit der Lupe auf die Stelle fahren und klicken oder den Finger loslassen. HEX-, RGB- und HSL-Code stehen neben dem Farbfeld und werden per Tipp kopiert.
Kann ich eine Farbe aus einem Screenshot aufnehmen?
Ja. Screenshot mit Strg+V einfügen oder die Datei hineinziehen. Screenshots eignen sich besonders, weil ihre Farben kein Kamerarauschen haben.
Warum weicht die gewählte Farbe leicht von der Markenfarbe ab?
JPEG-Kompression und Kameraverarbeitung verändern Pixelwerte etwas. Für Logos möglichst die originale PNG- oder SVG-Datei verwenden oder mehrere benachbarte Pixel vergleichen.
Was ist der Unterschied zwischen dominanter und durchschnittlicher Farbe?
Die dominante Farbe ist die größte Gruppe ähnlicher Pixel. Der Durchschnitt mischt alle Pixel, ein rot-blaues Bild ergibt also ein Violett, das darin vielleicht gar nicht vorkommt.
Wie viele Farben kann die Palette haben?
5 bis 12. Wenige Farben zeigen das Hauptthema, mehr Farben erfassen auch kleine Akzente.
Wird mein Bild hochgeladen?
Nein. Das Bild wird im Browser gelesen und analysiert und nirgendwohin gesendet.