Visuelle Identität 18. April 2023

Deine Markenfarbe ist nicht eine Farbe. Sie ist drei.

Von Mustafa Al Awad

Ein Kunde rief mich einmal frustriert an.

Seine Visitenkarten und sein Roll-up-Banner waren gerade geliefert worden. 1000 Visitenkarten. Das Petrol, das er für seine Marke gewählt hatte — die Farbe, über die er wochenlang nachgedacht hatte, die auf seiner Website frisch und selbstbewusst wirkte — sah auf jedem einzelnen Stück graugrün aus. Flach. Fast leblos.

Er wollte dem Drucker die Schuld geben.

Ich musste ihm erklären, dass der Drucker genau das gemacht hat, was ihm gesagt wurde. Das Problem entstand viel früher, bevor jemand auf Drucken gedrückt hatte, bevor die Datei meinen Computer verlassen hatte. Das Problem war, dass ihm niemand erklärt hatte, dass seine Markenfarbe nicht als eine einzige Farbe existiert. Sie existiert als drei verschiedene Versionen von sich selbst, die in drei völlig unterschiedlichen Systemen leben.

Dieses Gespräch ist der Grund, warum ich das hier schreibe.

Wenn du Designer bist, weisst du bereits, worauf das hinausläuft. Aber wenn du Unternehmer oder Kunde bist und schon einmal auf ein gedrucktes Stück geschaut und gedacht hast, dass irgendetwas nicht stimmt — das ist auch für dich. Das Verstehen davon wird dir Geld, Frustration und 1000 Visitenkarten ersparen.

Farbe auf einem Bildschirm ist Licht

Wenn du eine Farbe auf deinem Handy, deinem Laptop oder einem digitalen Bildschirm siehst, siehst du Licht. Genauer gesagt siehst du eine Kombination aus rotem, grünem und blauem Licht, das zusammengemischt wird. Das ist das RGB-Farbmodell.

RGB funktioniert durch Addition. Du startest mit Schwarz — also gar kein Licht — und fügst Rot, Grün und Blau in verschiedenen Mengen hinzu, bis du die gewünschte Farbe erhältst. Wenn du alle drei in voller Intensität kombinierst, erhältst du Weiss. Reines, helles, digitales Weiss.

Deshalb ist RGB die richtige Wahl für alles, was auf einem Bildschirm lebt: Websites, Apps, Social Media, digitale Anzeigen. Die Farben können lebhaft, gesättigt, leuchtend sein. Bildschirme können Farben erzeugen, die keine Druckfarbe auf Papier jemals erreichen kann.

RGB-Werte werden als Zahlen von 0 bis 255 für jeden Kanal ausgedrückt. Ein reines Rot ist (255, 0, 0). Ein tiefes Blau ist (0, 0, 255). Ein sattes Petrol liegt bei etwa (0, 128, 128). Mische alle drei Kanäle und du kannst über 16 Millionen Kombinationen erzeugen.

Im Webdesign wird RGB auch als HEX-Code ausgedrückt — eine sechsstellige Kurzform, die mit einem Rautezeichen beginnt. Die ersten zwei Zeichen stehen für Rot, die nächsten zwei für Grün, die letzten zwei für Blau. HEX-Codes sind überall in CSS und in Figma. Sie sind kompakt, leicht kopierbar und von allen Browsern verstanden.

Wenn du eine Farbpalette für ein digitales Produkt aufbaust, lebst du in RGB und HEX.

Farbe auf Papier ist Tinte

Drucken funktioniert in die entgegengesetzte Richtung.

Statt Licht zu einem schwarzen Nichts hinzuzufügen, schichtest du Tinte auf weisses Papier. Das Modell heisst CMYK: Cyan, Magenta, Yellow und Key (also Schwarz). Es funktioniert durch Subtraktion. Du beginnst mit dem Weiss des Papiers und jede Tinte, die du hinzufügst, absorbiert mehr Licht und bringt dich näher zu Schwarz.

Deshalb können die Farben im Druck nie so hell sein wie auf dem Bildschirm. Tinte absorbiert Licht. Sie kann es nicht erzeugen. Egal wie gut dein Drucker ist, er kann die leuchtende Qualität eines hintergrundbeleuchteten digitalen Displays nicht reproduzieren.

CMYK-Werte werden als Prozentwerte von 0 bis 100 für jede Tinte ausgedrückt. Ein Petrolton liegt im CMYK-Bereich bei etwa (100, 0, 0, 50) — viel Cyan, dunkel durch das Schwarz. Genau in dieser Formelverschiebung versteckt sich das Problem.

Das ist die Lücke, die das Problem meines Kunden verursacht hat. Sein Petrol war für die Website in RGB definiert worden. Als die Dateien ohne ordnungsgemässe Konvertierung in CMYK zum Drucker gingen, interpretierte der Drucker die Werte so gut er konnte. Das Ergebnis war jene flache, graugrüne Version der Farbe, in die er sich verliebt hatte.

Die Lösung ist kein besserer Drucker. Die Lösung ist zu verstehen, für welches System du designst, bevor du anfängst.

Wenn exakte Farbe nicht verhandelbar ist

Selbst CMYK hat Grenzen. Ergebnisse können je nach Drucker, Papiersorte und Tintencharge variieren. Für die meisten Projekte ist das akzeptabel. Für manche nicht.

Hier kommt PANTONE ins Spiel.

PANTONE ist ein proprietäres Farbabgleichsystem, das in Grafikdesign, Mode, Verpackung und Fertigung eingesetzt wird. Anstatt Tinten spontan zu mischen, werden PANTONE-Farben nach exakten Formeln vorgemischt. Wenn du eine PANTONE-Farbe angibst, bekommst du genau diesen Ton jedes Mal — egal ob in der Schweiz gedruckt oder aus einer Fabrik in Taiwan geliefert.

PANTONE ist die Wahl, wenn Konsistenz entscheidend ist: Markenverpackungen, Beschilderung, Merchandise. Es ist auch teurer, da es spezielle Tinte statt Standard-Vierfarbdruck erfordert.

Für die meisten kleinen Unternehmen und Startups reicht CMYK. Aber wenn deine Markenfarbe ein zentraler Teil deiner Identität ist und auf sehr unterschiedlichen Materialien und in verschiedenen Kontexten erscheinen wird, ist PANTONE die Investition wert.

Das Pantone Color System erklärt das im Detail, wenn du tiefer einsteigen möchtest.

Das Tool, das das Problem löst

Die Theorie zu kennen ist eine Sache. Eine zuverlässige Methode zu haben, deine Werte in allen Formaten zu konvertieren und zu überprüfen, ist eine andere.

Adobe Color ist das Tool, das ich nutze. Es ist kostenlos, browserbasiert und ermöglicht es dir, eine Farbe in einem beliebigen Format einzugeben — HEX, RGB, CMYK — und sofort die entsprechenden Werte in allen anderen zu sehen. Du kannst auch Farbpaletten aus Bildern extrahieren, Kontrastverhältnisse für Barrierefreiheit prüfen und direkt in Figma oder Adobe-Tools exportieren.

Für Markenrichtlinien im Besonderen ist die Dokumentation deiner Farbwerte in allen vier Formaten — HEX, RGB, CMYK und PANTONE — nicht verhandelbar. Adobe Color macht diesen Prozess schnell und präzise. Kein Raten, kein "nah dran".

Warum das für deine Marke wichtig ist

Wenn ich ein Design System aufbaue, ist eines der ersten Dinge, die ich dokumentiere, die Farbwerte in jedem Format, das die Marke benötigen wird: HEX für Web, RGB für Digital, CMYK für Standarddruck, PANTONE für Premium-Produktion.

Das ist keine zusätzliche Arbeit. Das ist die Arbeit. Eine Markenfarbe einmal in einem Format zu definieren und zu hoffen, dass sie überall korrekt übersetzt wird, ist der Weg, wie man 1000 Visitenkarten und ein Roll-up-Banner nachdrucken muss.

Die 60-30-10 Regel ist ein guter Ausgangspunkt beim Aufbau deiner Palette. Aber zu verstehen, in welchem Farbmodell du arbeitest, ist das, was diese Palette konsistent hält, sobald sie deinen Bildschirm verlässt.

Ich bin tief in dieses Thema im Fundara Case Study eingetaucht, wo die Farbtoken-Architektur sowohl Light- als auch Dark-Mode über ein komplexes Finanzprodukt hinweg unterstützen musste. Die Farben mussten überall und jederzeit funktionieren. Das beginnt damit, die Werte von Anfang an richtig zu definieren.

Noch eine Sache

Farbmodelle sind das Fundament. Aber wie du diese Farben über ein Produkt hinweg organisierst und anwendest — durch Tokens, Variablen und ein Design System — ist ein völlig anderes Gespräch. Eines, über das ich bald schreiben werde. Wenn das für dich nützlich ist, abonniere den Newsletter und es landet in deinem Posteingang, wenn es fertig ist.

In der Zwischenzeit: Wenn du noch immer einen einzigen HEX-Code als deine gesamte Markenfarb-Definition verwendest — das ist eine gute Woche, um das zu ändern.