Hex-Code aus einem Bild auslesen

So funktioniert es

Um den Hex-Code einer Farbe aus einem Bild zu ermitteln, wählen Sie die Datei über das Feld aus oder klicken Sie darauf, wählen Sie die Palettengröße und drücken Sie auf die Schaltfläche. Die Farben erscheinen am Bildschirm als Felder, und der HEX-Wert unter jedem Feld ist derselbe Wert, der in der heruntergeladenen Textdatei steht — er lässt sich also direkt in CSS, in Figma oder in eine Präsentationsvorlage einsetzen. Das Verfahren ist dieses: Das Bild wird auf eine kleine Fläche von 64 Pixeln gezeichnet, jeder ihrer Bildpunkte wird gelesen, und nahe beieinanderliegende Farben werden in denselben Eimer gezählt. Jeder Kanal wird in Schritte von 32 geteilt, was insgesamt 512 Eimer ergibt, sodass kleine Unterschiede innerhalb eines Tons als eine Farbe gelten. Die am stärksten gefüllten Eimer gewinnen, und die Palettenfarbe ist der Mittelwert der Bildpunkte darin — nicht die Mitte des Eimers, die einen Ton benennen könnte, den das Bild nie enthalten hat. Die heruntergeladene Datei führt je Zeile eine Farbe: den HEX-Code, dieselbe Farbe als RGB und ihren Anteil an den gezählten Bildpunkten. Genannt werden die Farben mit dem größten Flächenanteil; einen einzelnen Bildpunkt können Sie nicht anklicken. Suchen Sie den Code eines kleinen Details, schneiden Sie das Bild vorher auf dieses Detail zu.

Dieses Werkzeug ist auch als hex-code aus dem bild extrahieren, hex-farbauswahl aus dem bild, hexadezimalcode aus dem bild ermitteln, html-farbauswahl aus bild, hex code aus bild, farbpalette aus bild, farben aus bild auslesen, dominante farbe finden bekannt.

Was ist Farbpalette?

Eine Farbpalette ist eine begrenzte Menge von Farben, die zusammen verwendet werden sollen. Die Begrenzung ist der eigentliche Punkt: Eine Oberfläche oder eine Präsentation, die drei bis vier Farben treu bleibt, wirkt geordnet, darüber hinaus verliert das Auge den Halt. Eine aus einem Foto ausgelesene Palette bringt ihre Begründung schon mit, denn diese Farben standen unter einem Licht nebeneinander und haben sich dort nicht gestört.

Was ist Vorherrschende Farbe?

Die vorherrschende Farbe ist die, die im Bild die größte Fläche bedeckt — nicht die, die am meisten auffällt. Ein weiter Himmel nimmt in einer Landschaft den größten Anteil ein, während der Blick in Wirklichkeit an einer kleinen orangefarbenen Jacke hängen bleibt. Für die Verwendung einer Palette ist dieser Unterschied wesentlich: Die vorherrschende Farbe trägt als Hintergrund, die kleine Gegenfarbe als Akzent; beiden dieselbe Fläche zu geben, ergibt einen Entwurf, der mit sich selbst streitet.

Was ist HEX-Farbcode?

Ein HEX-Code schreibt eine Farbe als drei Paare von Sechzehnerzahlen hinter einem Rautezeichen, je ein Paar pro Kanal: #FF0000 ist volles Rot, #000000 ist Schwarz, #FFFFFF ist Weiß. Jedes Paar deckt denselben Bereich von 0 bis 255 ab, den RGB in Zehnerzahlen schreibt, beim Wechsel zwischen beiden geht also nichts verloren. Im Web hat sich die Schreibweise durchgesetzt, weil sie kurz, eindeutig und sicher einzufügen ist; jedes Gestaltungsprogramm liest und schreibt sie heute.

HEX oder RGB — worin liegt der Unterschied?

Es sind zwei Schreibweisen derselben Farbe und nicht zwei verschiedene Farben. RGB nennt die drei Kanäle als Zehnerzahlen von 0 bis 255, und in dieser Form erwarten CSS, Bürosoftware und die meisten Bildprogramme die Angabe. HEX packt dieselben drei Zahlen in Sechzehnerschreibweise hinter ein Rautezeichen — #1E90FF ist Rot 30, Grün 144, Blau 255 —, was kürzer zu tippen ist und wovon Web- und Gestaltungswerkzeuge standardmäßig ausgehen. Keine der beiden ist genauer als die andere, und beim Umrechnen geht überhaupt nichts verloren. Die Palettendatei nennt beide in derselben Zeile, die Wahl richtet sich also allein nach dem Feld, in das Sie einsetzen.

So bekommen Sie den Hex-Code aus einem Bild

Ein Hex-Code ist die Form, in der jedes Stylesheet und jedes Gestaltungsprogramm eine Farbe erwartet: sechs Zeichen hinter einem Rautezeichen, etwa #1E90FF. Wählen Sie hier ein Bild aus und drücken Sie auf die Schaltfläche, so wird das Bild in genau diese Codes übersetzt — ein Bildschirmfoto, ein Produktfoto oder ein Logo wird damit zu etwas, das Sie in CSS, in ein Markenhandbuch oder in eine Präsentationsvorlage einsetzen können, ohne eine Farbe nach Augenmaß zu tippen.

Zurück kommen die vorherrschenden Farben und nicht die Farbe eines Bildpunkts, auf den Sie zeigen. Dieser Unterschied zählt, wenn Sie ein kleines Detail suchen — etwa ein Logo auf einem unruhigen Foto. Schneiden Sie das Bild zuvor auf dieses Detail zu, dann erscheint die gesuchte Farbe als die vorherrschende.

Wozu eine Palette dient

Ein Entwurf passt zu einem Foto, wenn die Farben gemessen und nicht nach Augenmaß geraten werden. Die Farbe einer Schaltfläche aus einem Produktfoto ableiten, ein Präsentationsthema um ein Gemälde herum bauen oder den genauen Ton zurückgewinnen, den eine Marke in einem alten Bild verwendet hat — das sind die alltäglichen Aufgaben dieses Werkzeugs.

Sie müssen nicht alles verwenden, was es findet. Die meisten Entwürfe tragen mit einer vorherrschenden Farbe, einer Gegenfarbe und einem neutralen Ton; der Rest der Liste steht als Auswahl bereit, und mehr davon macht ein Layout in der Regel unruhiger statt reicher.

Warum dasselbe Bild verschiedene Antworten geben kann

Eine Palette ist eine Zusammenfassung, keine Messung. Die Reihenfolge verschiebt sich mit der Zahl der angeforderten Farben: Bei vier werden zwei benachbarte Töne unter einer Überschrift gezählt, bei acht können sich dieselben zwei in eigene Zeilen trennen.

Auch ein Zuschnitt ändert das Ergebnis, denn gerechnet wird nach Fläche: Fällt der Himmel aus dem Bildausschnitt, bricht der Anteil des Blaus ein. Suchen Sie die Farbe eines bestimmten Bereichs, schneiden Sie das Bild zuerst auf diesen Bereich zu und lesen Sie die Palette danach aus.

Durchsichtige Flächen werden nicht gezählt

Durchsichtige Bildpunkte in einem PNG werden übergangen; gezählt wird nur, was tatsächlich gefärbt ist. Bei einem Logo mit durchsichtigem Hintergrund besteht die Palette deshalb aus den Farben des Logos, ohne dass sich Weiß oder Schwarz aus der leeren Fläche einschleicht.

Halbdurchsichtige Bildpunkte werden mit ihrem eigenen Wert gezählt, ohne mit dem vermischt zu werden, was darunter läge. Bei einer Datei aus vielen übereinanderliegenden, durchscheinenden Ebenen kann die Palette daher etwas von dem abweichen, was Ihr Auge am Bildschirm sieht.

Häufige Fragen

Wie bekomme ich den Hex-Code aus einem Bild?

Wählen Sie das Bild aus, wählen Sie die Palettengröße und drücken Sie auf die Schaltfläche. Unter jedem Farbfeld am Bildschirm steht sein Hex-Code, und die heruntergeladene Textdatei nennt dieselben Codes samt RGB-Schreibweise — bereit zum Einsetzen in CSS oder ein Gestaltungsprogramm.

Warum stehen HEX und RGB beide da?

Es sind zwei Schreibweisen derselben Farbe. HEX erwarten Web- und Gestaltungsprogramme, RGB nehmen CSS, Bürosoftware und die meisten Präsentationsprogramme anstandslos entgegen. Beide stehen in derselben Zeile, damit Sie nehmen können, was das Feld verlangt, in das Sie einsetzen.

Sind die Farben genau die Bildpunkte aus dem Bild?

Nein. Nahe Töne werden in einem Eimer gesammelt, und die Palettenfarbe ist dessen Mittelwert; der Wert ist also stellvertretend und nicht wörtlich. Brauchen Sie den genauen Wert eines bestimmten Bildpunkts, hilft eine Pipette und kein Palettenwerkzeug.

Was bedeutet der Prozentwert?

Er ist der Anteil dieser Farbe an den gezählten Bildpunkten. Eine Farbe mit 40 Prozent bedeckt rund zwei Fünftel der gefärbten Fläche des Bildes. Durchsichtige Bildpunkte bleiben außen vor, die Anteile beschreiben also allein den sichtbaren Teil.

Wird es bei einem sehr großen Bild langsam?

Nein. Das Bild wird zuerst auf eine kleine Fläche gezeichnet, und gezählt wird dort; ein Foto mit 24 Megapixeln schrumpft also auf wenige tausend Bildpunkte, bevor der erste gelesen wird. Das Ergebnis erscheint sofort und weicht kaum von einer Zählung in voller Größe ab.