Markenfarben aus Logos und Screenshots übernehmen

Warum die exakte Markenfarbe so oft gebraucht wird

Es gibt diesen einen Moment im Design-Alltag, der jeden früher oder später erwischt: Du hast ein Logo vor dir, vielleicht als Bild in einer Mail, vielleicht auf einer fremden Website, und du brauchst genau diesen Farbton. Nicht ungefähr, sondern auf den HEX-Wert genau. Ein Styleguide liegt nicht vor, niemand kann dir sagen, ob das nun ein Blau mit einem Hauch Violett oder doch ein klares Cyan ist. In solchen Situationen ist ein Color-Picker das schnellste Werkzeug, das du haben kannst.

Der Bedarf ist erstaunlich breit. Ein neuer Mitarbeiter soll eine Präsentation im Look des Unternehmens bauen, kennt aber die Hausfarben nicht. Eine Agentur baut eine Landingpage nach und muss die Bestandsfarben treffen, damit alt und neu zusammenpassen. Ein Entwickler bekommt vom Kunden nur einen Screenshot statt eines Design-Files und soll daraus eine pixelgenaue Umsetzung machen. In allen Fällen geht es um dasselbe: Die Farbe steckt im Bild, du musst sie nur herausholen.

Genau das macht ein Color-Picker. Du lädst ein Bild in den Browser, fährst mit der Maus über die Stelle, die dich interessiert, und bekommst den Farbwert in HEX, RGB und HSL. Kein Photoshop, keine Installation, kein Hochladen auf einen fremden Server. Das Bild bleibt im Browser, die Farbe landet in deiner Zwischenablage.

Wofür sich das Auslesen lohnt

Bevor wir zum praktischen Teil kommen, lohnt ein Blick auf die typischen Anwendungsfälle. Sie unterscheiden sich nämlich darin, wie genau du arbeiten musst und worauf du achten solltest.

• Design-Konsistenz im eigenen Haus. Du betreust eine Marke, hast aber keinen vollständigen Styleguide. Aus vorhandenen Materialien wie Logo, alter Website oder Visitenkarte holst du dir die echten Werte und schreibst sie endlich sauber auf.
• Nachbau und Pflege bestehender Seiten. Eine Website wird erweitert, das Original-Design-File ist verschollen. Du pickst die Bestandsfarben direkt vom Screenshot, damit neue Elemente nahtlos passen.
• Inspiration und Recherche. Du sammelst Farbkombinationen, die dir gut gefallen, als Ausgangspunkt für eine eigene Palette. Hier geht es nicht um exakte Kopie, sondern um Anregung.
• Abgleich und Kontrolle. Du prüfst, ob eine Umsetzung wirklich die vorgegebene Markenfarbe trifft, oder ob sich beim Export ein Farbstich eingeschlichen hat.

Je nach Fall ist die nötige Präzision unterschiedlich. Für Inspiration reicht ein grober Eindruck. Für den exakten Nachbau eines Corporate-Designs zählt jeder einzelne Wert, und genau dort lauern die meisten Stolperfallen.

So gehst du Schritt für Schritt vor

Das Vorgehen ist im Kern simpel, aber die Reihenfolge entscheidet über die Qualität des Ergebnisses.

Zuerst brauchst du das Bild. Bei einem Logo nimmst du am besten die Originaldatei, falls du sie bekommst. Bei einer Website hilft ein Screenshot. Unter Windows machst du den mit der Tastenkombination Windows plus Umschalt plus S und ziehst einen Bereich auf, am Mac mit Cmd plus Umschalt plus 4. Wichtig ist, dass die Stelle, deren Farbe du brauchst, groß und scharf im Bild liegt. Zoome ruhig vorher in die Seite hinein, dann ist die Farbfläche im Screenshot größer und sauberer.

Danach lädst du das Bild in den Color-Picker. Du ziehst die Datei einfach ins Browserfenster oder wählst sie über den Dateidialog aus. Das Bild erscheint, und sobald du mit der Maus darüberfährst, zeigt das Werkzeug den Farbwert des Pixels unter dem Cursor. Viele Picker bieten eine Lupe, die den Bereich vergrößert, damit du genau den richtigen Pixel triffst.

Jetzt kommt der entscheidende Schritt: Du klickst auf die Stelle, deren Farbe du übernehmen willst. Und hier liegt die Kunst nicht im Klicken selbst, sondern in der Wahl der Stelle. Wähle immer die Mitte einer großen, gleichmäßig gefärbten Fläche. Nicht den Rand, nicht eine Kante, nicht einen Bereich mit Schatten oder Glanz. Der Wert wird dir in HEX, RGB und HSL angezeigt, und mit einem Klick landet er in der Zwischenablage.

Zum Schluss prüfst du das Ergebnis. Picke ruhig zwei oder drei Punkte derselben Fläche. Wenn alle denselben oder einen fast identischen Wert liefern, hast du eine saubere Vollfarbe erwischt. Weichen die Werte stark ab, ist die Fläche nicht so einheitlich, wie sie aussieht, und du solltest genauer hinschauen.

Die typischen Stolperfallen

Hier wird es interessant, denn genau an diesen Punkten gehen die meisten Markenfarben daneben.

JPEG-Artefakte verfälschen die Ränder

JPEG ist ein verlustbehaftetes Format. Um Dateigröße zu sparen, fasst die Kompression benachbarte Pixel zusammen und glättet Übergänge. Das fällt mitten in einer großen Fläche kaum auf, an Kanten und in kleinen Details aber sehr wohl. Pickst du dort, bekommst du eine Mischfarbe aus mehreren echten Farben, die in Wirklichkeit nirgends so vorkommt. Die Folge sind seltsame Zwischentöne, die sich partout nicht mit dem Original decken wollen. Deshalb gilt: Bei JPEG immer weit weg von jeder Kante picken, mitten in die Fläche. Noch besser ist, das Logo gleich als PNG oder SVG zu besorgen, weil diese Formate verlustfrei arbeiten und die Farbe exakt erhalten.

Gradient statt Vollfarbe

Viele moderne Logos und Buttons sind nicht einfarbig, sondern haben einen Farbverlauf. Was auf den ersten Blick wie ein sattes Blau aussieht, ist oben heller und unten dunkler. Pickst du einen einzelnen Punkt, bekommst du nur eine Momentaufnahme aus diesem Verlauf, nicht die eine richtige Farbe, denn die gibt es hier gar nicht. In diesem Fall musst du entscheiden, was du brauchst: Pickst du den Anfangs- und den Endpunkt des Verlaufs, kannst du den Gradienten selbst nachbauen. Brauchst du nur eine repräsentative Hauptfarbe, nimm den Mittelpunkt. Wichtig ist, dass du den Verlauf überhaupt erkennst, statt blind einen Punkt zu erwischen und dich später zu wundern.

Transparente Bereiche und durchscheinender Hintergrund

PNG-Logos haben oft transparente Bereiche. Liegt ein halbtransparentes Element über einem Hintergrund, mischt sich dessen Farbe in das, was du siehst. Du pickst dann nicht die reine Markenfarbe, sondern eine Mischung aus Vordergrund und Hintergrund. Das passiert auch bei Schatten, weichen Kanten und Überlagerungen mit niedriger Deckkraft. Wenn ein Logo auf weißem Grund anders aussieht als auf dunklem, ist das ein deutliches Zeichen für Transparenz im Spiel. Lege das Logo zum Picken am besten auf einen neutralen, einfarbigen Hintergrund und suche eine voll deckende Stelle.

Skalierung und Kantenglättung

Wird ein Logo verkleinert dargestellt, glättet der Browser die Kanten, damit sie nicht ausgefranst aussehen. Diese Glättung erzeugt am Rand jede Menge Zwischenpixel in Mischfarben. Je kleiner das Logo im Bild ist, desto mehr Anteil haben diese Randpixel und desto schwerer wird es, eine saubere Vollfarbe zu treffen. Darum der Tipp von vorhin: vor dem Screenshot in die Seite zoomen, damit die Farbfläche groß genug ist.

Der wichtigste Tipp in einem Satz

Wenn du dir nur eine Sache merkst, dann diese: Picke immer mitten in eine möglichst große, gleichmäßig gefärbte Fläche und meide jeden Rand. Damit umgehst du Artefakte, Kantenglättung und Mischpixel in einem Aufwasch. Eine kurze Gegenprobe mit zwei, drei Klicks an derselben Stelle bestätigt dir, dass du eine echte Vollfarbe erwischt hast und nicht einen Zufallswert aus einem Verlauf.

Ein fairer Hinweis zu fremden Markenfarben

Zum Schluss noch ein Punkt, den man ehrlich ansprechen sollte. Eine einzelne Farbe ist für sich genommen meist niemandes Eigentum. Es gibt aber Fälle, in denen ein bestimmter Farbton als Marke geschützt ist, weil ein Unternehmen ihn über Jahre konsequent und bekannt genutzt hat. Das betrifft einzelne, sehr prägnante Töne großer Marken und ist die Ausnahme, nicht die Regel.

Entscheidend ist, wofür du die Farbe nutzt. Sie auszulesen, um zu verstehen, wie ein Design aufgebaut ist, um eine eigene Palette zu inspirieren oder um Bestandsmaterial konsistent fortzuführen, ist etwas anderes, als das komplette Erscheinungsbild einer fremden Marke nachzubauen und damit am Markt aufzutreten. Analyse und Inspiration sind das eine, das gezielte Nachahmen einer fremden Identität ist das andere. Wenn du unsicher bist, ob dein Vorhaben in eine heikle Richtung geht, hol dir im Zweifel fachkundigen Rat. Das hier ist keine Rechtsberatung, sondern ein Hinweis aus der Praxis, damit du die Werkzeuge mit dem richtigen Augenmaß einsetzt.

Worauf es ankommt

Markenfarben aus einem Logo oder Screenshot zu übernehmen ist technisch in Sekunden erledigt, sauber wird es aber erst durch die richtige Stelle. Nimm verlustfreie Formate, wo es geht, picke mitten in große Vollfarb-Flächen, erkenne Verläufe und Transparenz, bevor sie dir falsche Werte unterschieben, und prüfe mit einer kurzen Gegenprobe. Dann hältst du den exakten HEX-Wert in der Hand, statt mit einem Zufallston weiterzuarbeiten. Und behalte den Unterschied zwischen Inspiration und Nachahmung im Hinterkopf, dann nutzt du das Werkzeug nicht nur präzise, sondern auch mit dem nötigen Anstand.