Kostenlos für iOS

HEX-Code einer Farbe aus einem Foto herausfinden

Ein HEX-Code wie #3A7BD5 legt eine Bildschirmfarbe mit sechs Zeichen eindeutig fest, und jedes Foto, jedes Bild und jeder Screenshot enthält Tausende solcher Werte. Entscheidend ist, welches Pixel Sie auslesen: Eine ruhige Stelle abseits von Kanten und Glanzlichtern liefert einen Code, den Sie ohne Umweg in CSS, Figma, Canva oder PowerPoint einsetzen können.

Kurzantwort

Öffnen Sie das Bild in Color Identifier aus Ihrer Fotomediathek und ziehen Sie den Farbwähler auf eine gleichmäßige Stelle der gesuchten Farbe. Die App liest genau dieses eine Pixel aus und zeigt dessen HEX-Code, dazu RGB, HSB, CMYK und den nächstgelegenen Farbnamen; „Hex kopieren“ legt den Code in die Zwischenablage. Lesen Sie zur Kontrolle zwei, drei benachbarte Pixel aus: Liegen die Werte nur wenige Stufen auseinander, haben Sie die Farbe. Das Auslesen aus Fotos gehört zu Pro; ohne Pro können Sie es zweimal pro Sitzung ausprobieren, Name und Code bleiben dabei ausgeblendet.

Welche Bildquelle den verlässlichsten Code liefert

Nehmen Sie, wann immer möglich, die Originaldatei. Ein Screenshot einer Website oder App ist die sauberste Quelle, weil jedes Pixel genau die Farbe trägt, die auf dem Bildschirm dargestellt wurde. Bilder, die über WhatsApp, Signal, Instagram oder per E-Mail gewandert sind, wurden dagegen neu komprimiert: Die JPEG-Kompression verschmiert Farbe über benachbarte Pixel, sodass dieselbe Stelle im Original #3A7BD5 und nach dem Versand #3C7AD2 ergeben kann.

Auch der Weg in die App zählt. Teilen Sie ein Bild aus einer anderen App über das Teilen-Menü an Color Identifier, wird es dabei erneut als JPEG gespeichert, was einzelne Pixelwerte leicht verschiebt. Für exakte Codes aus Screenshots öffnen Sie das Bild deshalb direkt in der App aus der Fotomediathek.

Bei Fotos von echten Gegenständen hat die Kamera schon vor Ihrer Messung entschieden: Weißabgleich, Belichtung und eventuelle Filter verschieben die Zahlen. Der Code beschreibt dann die Farbe, wie sie auf diesem Foto erscheint. Das passt für ein Design, das zum Bild gehören soll, ist aber keine Messung des Gegenstands bei anderem Licht.

Ein Pixel treffen, keine Kante

Der Farbwähler liest exakt ein Pixel, setzen Sie ihn deshalb in die Mitte einer einfarbigen Fläche. In Screenshots sind die Ränder von Schrift, Icons und Linien geglättet: Dort mischen sich Vorder- und Hintergrundfarbe, und der abgelesene Code liegt irgendwo dazwischen. Eine Lupe oder Zoomfunktion hat die App nicht. Für kleine Details schneiden Sie das Bild vorher in der Fotos-App zu, dann füllt der relevante Bereich den Bildschirm und lässt sich mühelos treffen.

In Fotos meiden Sie Glanzlichter, Schatten und Strukturen wie Stoffgewebe, Holzmaserung oder Rauputz. Bei Verläufen, etwa Abendhimmel, angestrahlter Fassade oder Hautton, hat jeder Punkt seinen eigenen Code; legen Sie also fest, welcher Abschnitt gemeint ist. Mehrere Messungen in derselben Zone zeigen schnell, ob die Farbe stabil ist oder rauscht.

Den Code in CSS, Figma, Canva und Office einsetzen

„Hex kopieren“ legt den Code samt Raute in die Zwischenablage, etwa #94766C. In CSS setzen Sie ihn direkt hinter color oder background-color, in Figma und Sketch fügen Sie ihn in das Hex-Feld der Füllung ein, in Canva in das Hex-Feld der Farbauswahl. Keynote, PowerPoint und Word nehmen den Wert in ihren Farbdialogen entgegen; wo ein Programm nur nach Rot, Grün und Blau fragt, greifen Sie zu „RGB kopieren“.

Diese Taste liefert dieselbe Farbe als R: 148, G: 118, B: 108; in CSS wird daraus rgb(148, 118, 108). Jede Zeile der Detailansicht hat außerdem eine eigene Kopiertaste, auch für HSB und CMYK. Wer mehrere Töne für ein Corporate Design oder ein Moodboard sammelt, speichert sie besser in der App als im Notizzettel: Gespeicherte Farben behalten ihre Codes und lassen sich als Text mit HEX, RGB, HSB und CMYK oder als Bild teilen.

Warum der Code um ein paar Stellen abweicht

Zwei Messungen derselben Farbe unterscheiden sich oft minimal, und das ist normal. Kompression, Skalierung und das Farbprofil verändern einzelne Pixel. iPhone-Fotos werden zudem häufig im erweiterten Farbraum Display P3 gespeichert, während die meisten Webwerkzeuge mit sRGB rechnen. Ein Unterschied von wenigen Einheiten in einem Kanal ist mit bloßem Auge nicht zu sehen.

Ein großer Sprung bedeutet dagegen fast immer, dass Sie eine andere Stelle erwischt haben: eine Kante, einen Schatten, eine Spiegelung. Verschieben Sie den Wähler ein Stück und lesen Sie neu ab, bevor Sie einen Wert für eine Markenfarbe oder ein Stylesheet festschreiben.

HEX-Codes lesen: was die sechs Zeichen bedeuten

Ein HEX-Code enthält dieselbe Information wie ein RGB-Wert, nur im Sechzehnersystem notiert: Je zwei Zeichen stehen für Rot, Grün und Blau. In #94766C ist 94 der Rotanteil (148), 76 der Grünanteil (118) und 6C der Blauanteil (108). 00 heißt kein Licht, FF volle Intensität, daher ist #FFFFFF Weiß und #000000 Schwarz. Die Kurzform #FA0 steht für #FFAA00.

Für Web und die meisten Gestaltungsprogramme ist HEX das gängige Format. RGB passt, wo ein Programm drei getrennte Zahlen erwartet, HSB, wenn Sie Helligkeit oder Sättigung von Hand ändern möchten, und CMYK nur als Ausgangspunkt für den Druck, der ohnehin einen Andruck braucht. Die Detailansicht zeigt die gewählte Farbe in allen vier Formaten.

Drei typische Aufgaben

Die Farbe eines Buttons auf einer Website nachbauen: Screenshot der Seite, Messung im Inneren des Buttons, Code ins eigene Stylesheet. Einen Ton aus einem Urlaubsfoto für eine Präsentation übernehmen: Foto zuschneiden, ruhige Fläche wählen, zwei oder drei Messungen vergleichen. Die Hausfarbe aus einem Logo ermitteln: Logo am Bildschirm groß anzeigen, Screenshot machen und die Fläche statt der Kontur messen. Gibt es ein Corporate-Design-Handbuch, steht dort der verbindliche Wert, und Ihre Messung dient als Gegenprobe.

Häufige Fragen

Kann ich den HEX-Code aus einem Screenshot auslesen?

Ja, und Screenshots liefern die verlässlichsten Codes, weil nichts neu komprimiert wurde. Öffnen Sie den Screenshot in der App aus der Fotomediathek und messen Sie im Inneren einer Farbfläche statt am Rand von Text oder Symbolen.

Warum ändert sich der Code, wenn ich den Wähler nur leicht verschiebe?

Der Wähler liest ein einzelnes Pixel, und auch scheinbar gleichmäßige Flächen bestehen aus leicht unterschiedlichen Pixeln. Kleine Änderungen sind normal; große bedeuten, dass Sie auf eine Kante, ein Glanzlicht oder einen Schatten geraten sind.

Ist der HEX-Code aus dem Foto die echte Farbe des Gegenstands?

Er ist die Farbe, wie sie auf diesem Foto erscheint. Licht, Weißabgleich und Filter prägen die Aufnahme, daher eignet sich der Code für Gestaltung passend zum Bild, ist aber keine Messung des Objekts selbst.

Gibt es in der App eine Lupe zum Vergrößern?

Nein. Schneiden Sie das Bild vorher in der Fotos-App auf den gewünschten Ausschnitt zu; dann füllt das Detail den Bildschirm, und Sie treffen das richtige Pixel leichter.

Wird mein Foto zum Auslesen hochgeladen?

Nein. Das Auslesen der Farbe und die Suche nach dem nächstgelegenen Namen laufen auf Ihrem iPhone oder iPad, ein Konto ist dafür nicht nötig.

HEX-Code einer Farbe aus einem Foto herausfinden

Laden Sie die Farberkennung herunter, um mit iPhone-Kamera oder Fotos den HEX-Code aus einem Foto zu erhalten.

Im App Store laden - kostenlos