Farbe aus Bild bestimmen

Kann ich Text auf diese Farbe setzen?

Das ist fast immer die eigentliche Frage, deshalb wird sie direkt beantwortet: Jede gewählte Farbe wird nach der WCAG-Formel auf ihren Kontrast zu weißem und schwarzem Text geprüft, und neben dem Verhältnis steht, ob es besteht oder nicht.

• 4,5:1 ist das Minimum für normalen Text (WCAG AA).
• 3:1 ist das Minimum für großen Text: etwa 24 px, oder 19 px fett.
• 7:1 ist die strengere Stufe AAA.

Die Formel ist kein einfacher Helligkeitsvergleich. Sie nutzt die relative Leuchtdichte, die Grün viel stärker gewichtet als Rot und Blau und eine Gammakurve anwendet. Deshalb ist ein gesättigtes Blau, das „mittel“ wirkt, viel dunkler, als es aussieht, und ein kräftig wirkendes Gelb fast so hell wie Weiß.

Das lässt sich nach Augenmaß nicht zuverlässig abschätzen, und deshalb lohnt es sich, die Zahl zu zeigen.

Warum die erhaltene Farbe vom Original abweichen kann

Zwei ehrliche Einschränkungen:

• JPEG-Kompression verändert Farben leicht. Farbinformation wird in geringerer Auflösung gespeichert als die Helligkeit, der genaue Wert eines kleinen farbigen Details kann sich also gegenüber dem verschoben haben, was die Kamera aufgenommen hat. Eine große, gleichmäßige Fläche zu treffen, bringt Sie näher heran.
• Farbprofile werden nicht angewendet. Ein als Adobe RGB oder Display P3 gekennzeichnetes Bild wird als reine Zahlen gelesen, eine gesättigte Farbe kann also anders ausgelesen werden, als eine Anwendung mit Farbmanagement sie anzeigt. Bei sRGB-Bildern, also fast allem im Web, gibt es keinerlei Unterschied.

Wofür Menschen es nutzen

• Eine Markenfarbe treffen, aus einem Logo, wenn niemand das Markenhandbuch findet.
• Eine Palette aus einem Foto erstellen: ein verbreiteter und wirklich guter Weg, Farben für eine Website oder Präsentation zu wählen.
• Einen Screenshot untersuchen, um die genaue Farbe eines Designs zu finden.
• CSS-Werte bekommen aus einem Layout, das als Bild geliefert wurde.
• Die Lesbarkeit prüfen, bevor Text auf ein Foto oder eine Farbfläche kommt.

Nichts wird hochgeladen

Das Bild wird in Ihrem Browser dekodiert und ausgelesen. In dieser Geschwindigkeit ginge es auch nicht anders, denn die ganze Interaktion besteht darin, „was liegt unter meinem Zeiger“ so schnell zu beantworten, wie Sie ihn bewegen, und das heißt, dass die Datei Ihr Gerät nie verlässt.

Das ist erwähnenswert, weil die Bilder, die Menschen auslesen, oft nicht ihre eigenen sind: ein unveröffentlichtes Design, die Markenmaterialien eines Kunden, der Screenshot eines Mitbewerbers.

Aus einem Foto wählen, nicht aus einer flachen Grafik

Ein praktischer Hinweis. Fotos haben keine flachen Farben. Was wie ein einfarbig roter Pullover aussieht, sind Hunderte Rottöne, die mit Licht und Schatten variieren, und das Pixel, auf das Sie klicken, ist eine Stichprobe aus dieser Bandbreite, nicht „die“ Farbe.

Bei einem Foto ist die extrahierte Palette meist nützlicher als jede einzelne Auswahl, weil jeder Eintrag der Durchschnitt einer ganzen Gruppe ist und kein beliebiges Pixel. Bei einem Logo, einem Screenshot oder einer flachen Grafik ist eine einzelne Auswahl genau richtig: Die haben tatsächlich einen einzigen Wert.

Eine dunklere oder hellere Version erhalten

Nutzen Sie HSL. Behalten Sie Farbton und Sättigung und ändern Sie nur die Helligkeit: von hsl(199, 55%, 50%) zu hsl(199, 55%, 35%) ist eindeutig dieselbe Farbe, dunkler. Dasselbe in HEX zu versuchen, zwingt Sie, drei Werte gleichzeitig anzupassen und zu raten, und so enden Paletten mit einem „Dunkelblau“, das unbemerkt ins Violette gerutscht ist.

Verwandte Werkzeuge

Lesen Sie ein Bild aus, um seinen Stil nachzubilden, verrät der Metadaten-Viewer, mit welcher Kamera und welchen Einstellungen es gemacht wurde. Wollen Sie mit den gefundenen Farben etwas gestalten, nimmt das Wasserzeichen-Werkzeug direkt einen Hexadezimalwert an.