Design

Farbe aus Bild auswählen

Beliebige Farbe aus einem Foto ziehen und eine Palette bauen.

Was es macht. Dieses Werkzeug liest die Farbe an jeder Stelle eines Bildes aus und erzeugt daraus eine Palette. Es zeigt zusätzlich die dominanten Farben, ermittelt über eine Häufungsanalyse statt über den Mittelwert — der Mittelwert eines bunten Fotos ist immer ein schmutziges Braun.

Läuft im BrowserKein UploadKeine AnmeldungFunktioniert offline

So benutzt du Farbe aus Bild auswählen

Zieh ein Bild auf das Feld.
Klick eine Stelle an, um die Farbe auszulesen; die Lupe hilft beim genauen Treffen.
Übernimm einzelne Farben in die Palette oder nutz die vorgeschlagenen dominanten Farben.

Dominant ist nicht Durchschnitt

Der Unterschied entscheidet darüber, ob die Palette brauchbar ist.

Der Durchschnitt addiert alle Pixel und teilt. Bei einem Sonnenuntergang mit Orange, Blau und Schwarz kommt ein schlammiges Braun heraus, das im Bild an keiner Stelle vorkommt.

Die Häufungsanalyse gruppiert dagegen ähnliche Farben und gibt die Mittelpunkte der größten Gruppen zurück. Das Ergebnis sind Farben, die im Bild tatsächlich vorkommen und es wiedererkennbar machen.

Dieses Werkzeug nutzt eine Häufungsanalyse mit fester Anzahl von Gruppen. Deshalb ändert sich das Ergebnis leicht, wenn du dieselbe Analyse erneut startest — die Startwerte sind zufällig.

Warum die ausgelesene Farbe anders aussieht

Drei Ursachen, und alle liegen zwischen Datei und Auge.

Die erste ist das Farbprofil. Ein Foto in Display P3 oder Adobe RGB enthält Farben, die außerhalb von sRGB liegen. Der Browser stellt sie dar, liefert beim Auslesen aber sRGB-Werte — der Wert stimmt, sieht aber weniger gesättigt aus als das, was du siehst.

Die zweite ist die Umgebung. Dieselbe Farbe wirkt neben Blau anders als neben Orange; das Auge bewertet Farben relativ. Ein Grau, das im Bild neutral aussieht, kann isoliert deutlich blaustichig sein.

Die dritte ist der Bildschirm. Ohne Kalibrierung zeigen zwei Geräte dieselbe Datei sichtbar verschieden. Für Webfarben ist das unkritisch, für Druckentscheidungen nicht.

Wie viele Farben braucht eine Palette?

Fünf bis sieben reichen fast immer, und weniger ist meist besser.

Eine brauchbare Aufteilung: eine dominante Farbe für Flächen, eine Akzentfarbe für Aktionen, zwei bis drei Neutraltöne für Text und Ränder, und ein bis zwei Signalfarben für Erfolg und Fehler.

Aus einem Foto lassen sich die ersten beiden gut gewinnen. Die Neutraltöne sollte man nicht aus dem Bild nehmen: Ein aus einem Foto gezogenes Grau bringt fast immer einen Farbstich mit, der sich über die ganze Oberfläche legt.

Prüf jede Farbe, die Text tragen soll, gegen ihren Hintergrund — direkt hier oder im Kontrast-Prüfer. Eine schöne Palette, die Text unlesbar macht, ist keine Palette.

Häufige Fragen

Wie lese ich eine Farbe aus einem Bild?

Bild hochladen und die Stelle anklicken. Die Lupe hilft, das richtige Pixel zu treffen.

Was ist der Unterschied zwischen dominant und durchschnittlich?

Der Durchschnitt ergibt bei bunten Bildern ein Braun, das nirgends vorkommt. Dominante Farben kommen im Bild wirklich vor.

Warum weicht die Farbe von dem ab, was ich sehe?

Meist wegen eines weiten Farbprofils wie Display P3. Der Wert ist sRGB, die Anzeige nicht.

Warum ändert sich das Ergebnis bei erneuter Analyse?

Weil die Häufungsanalyse mit zufälligen Startwerten arbeitet. Die Unterschiede sind gering.

Wie viele Farben soll eine Palette haben?

Fünf bis sieben. Neutraltöne besser nicht aus dem Foto ziehen, sie bringen einen Farbstich mit.

Wird mein Bild hochgeladen?

Nein, es wird nur in diesem Tab gelesen.

Ratgeber zu Farbe aus Bild auswählen

Layout and Colour Decisions in CSS8 min read