Farben aus einem Bild

1. 01Logo, Foto oder Screenshot auswählen oder in das Feld ziehen. Ein Bildschirmfoto einer Website reicht, um deren Farben zu bekommen.
2. 02Anzahl einstellen. Jede Farbe steht als HEX und RGB da, mit Anteil und mit der Angabe, ob weiße oder schwarze Schrift darauf lesbar ist.
3. 03Einzeln kopieren oder alle zusammen – als CSS-Variablen für die Website oder als einfache Liste für die Druckerei.

Wie die Farben gefunden werden: Der Farbraum wird in gleich große Kästchen geteilt, und jeder Bildpunkt fällt in genau eines. Die vollsten Kästchen gewinnen; ihre Farbe ist der Mittelwert der Punkte darin. Töne, die zu nah beieinander liegen, werden zu einer Farbe zusammengefasst. Da ist kein Zufall im Spiel: dasselbe Bild ergibt immer wieder genau dieselben Farben. Was weniger als ein halbes Prozent des Bildes ausmacht, wird nicht angeboten: an der Kante zwischen zwei Flächen entstehen beim Zeichnen Mischtöne, die im Logo gar nicht vorkommen. Gibt es im ganzen Bild nichts Größeres, zählt die Grenze nicht – dann bekommst du lieber eine winzige Farbe als eine leere Liste.

Warum die Prozente nicht 100 ergeben: Der Anteil sagt, wie viel vom sichtbaren Bild auf diese Farbe entfällt. Durchsichtige Stellen zählen dabei nicht mit: Wo weniger als die halbe Deckkraft steht, gibt es keine Farbe, die wirklich im Bild ist – was man sähe, hinge davon ab, was darunter liegt. Bei einem Logo auf durchsichtigem Grund beziehen sich die Prozente also auf das Logo, nicht auf die ganze Fläche; wie viel durchsichtig ist, sagt dir die Zeile unter der Liste. Ein Foto hat unzählige Zwischentöne, die für keine eigene Farbe reichen – die fallen weg. Bei einem Logo mit klaren Flächen kommen die Prozente meist sehr nah an 100, bei einem Sonnenuntergang eher nicht. Der Balken über der Liste zeigt das mit: der schraffierte Rest ist alles, was nicht in der Liste steht. Die Zeile unter der Liste sagt dir, woraus er besteht – aus zurückgestellten grauen Tönen, aus weiteren Farben, für die kein Platz war, aus winzigen Flecken unter einem halben Prozent oder aus Zwischentönen. Jeder Grund wird ab einem halben Prozent einzeln genannt: genau ab da zeichnet der Balken den Rest auch.

Grau, Schwarz und Weiß: Sie werden nach hinten gestellt, weil sonst bei fast jedem Logo der weiße Hintergrund die Liste anführt. Fehlen bunte Töne, rücken sie von allein nach – ein Schwarzweißbild bekommst du also vollständig. Über den Schalter kannst du sie jederzeit gleichberechtigt mitzählen lassen.

Die Pipette liest aus deinem Original, nicht aus der verkleinerten Vorschau. Sie mittelt dabei über die paar Bildpunkte, die unter deinem Finger liegen – sonst erwischt man bei einem Foto einen einzelnen Ausreißer. Ist die Stelle mehr als halb durchsichtig (Deckkraft unter 50 %), sagt sie das, statt eine Farbe zu erfinden – dieselbe Grenze wie in der Farbliste. Ist sie nur leicht durchsichtig, bekommst du die Farbe und dazu die Deckkraft dazugeschrieben: auf einem anderen Untergrund sieht sie anders aus.

Lesbare Schrift: Für jede Farbe wird der Kontrast zu Weiß und zu Schwarz nach WCAG 2.1 gerechnet. Ab 4,5:1 gilt normaler Text als lesbar, ab 3:1 großer Text (ab 24 px oder ab 18,66 px fett). Das ist die Zahl, an der auch Prüfstellen messen. Sie steht auf zwei Nachkommastellen abgerundet da, damit sie nie auf eine Schwelle rutscht, die der Wert gar nicht erreicht. Mehr dazu und zum Rechnen mit eigenen Farbpaaren im Farb-Werkzeug.

Grenzen: Gerechnet wird auf einer verkleinerten Fassung deines Bildes (höchstens rund 480.000 Bildpunkte) – das reicht für die Farben genau und hält auch ein 12-Megapixel-Foto flüssig. Die Werte sind reines RGB, wie es der Bildschirm zeigt; ein Farbprofil aus der Datei wird nicht umgerechnet. Für den Druck gibt der HEX-Wert die sichere Auskunft, die Umrechnung nach CMYK macht die Druckerei. HEIC-Fotos vom iPhone kann nur Safari öffnen; stell am iPhone sonst „Maximale Kompatibilität" ein.