Markenfarben für den Dark Mode anpassen

Eine tiefe Marineblau-Marke — ≈oklch(0.38 0.14 265), das selbstbewusste, fast schwarze Blau, das jeden Light-Mode-Screen verankerte — geht in einem Dark Theme live und verschwindet. Vor einer fast schwarzen Seite (L ≈0,22) hebt sich der primäre Button jetzt nur noch mit ≈1,7:1 von seinem Hintergrund ab, deutlich unter dem Mindestwert von 3:1 für UI-Komponenten. Die Farbe, die die Marke war, liest sich als leicht bläulicher Schatten.

Die Lösung ist keine neue Markenfarbe. Im Dark Mode wird die Aufgabe der Markenfarbe von einer anderen Stufe derselben Farbrampe übernommen — typischerweise ein oder zwei Stufen heller als der Light-Mode-Kern, entnommen aus einer dunklen Palette, die mit einer eigenen Helligkeitskurve und einem Chroma-Boost von rund 20 % abgeleitet wird. Die Wiedererkennung bleibt erhalten, weil Farbton und Rolle die Marke tragen, nicht die exakte Koordinate. Wie diese Ableitung über die gesamte Palette hinweg funktioniert, ist Thema unseres Dark-Mode-Leitfadens; in diesem Artikel geht es speziell um die Markenfarbe — Füllungen, große Flächen und Logos.

Warum versagt der kanonische Markenwert auf Fast-Schwarz?

Weil er gegen Weiß gewählt wurde. Ein Markenkern ist typischerweise darauf abgestimmt, souverän auf hellen Flächen zu sitzen — dunkel genug, um weißen Text zu tragen, gesättigt genug, um vor einer blassen Seite lebendig zu wirken. Verschiebst du ihn auf Fast-Schwarz, kann er in beide Richtungen versagen.

Zu dunkel, um sich abzuheben. Das Marineblau oben ist der Extremfall, aber selbst ein Kern mittlerer Helligkeit hat Mühe: #2563eb — oklch(0.546 0.215 262.9) — liegt bei ≈3,3:1 vor einer fast schwarzen Seite. Genug, damit eine große Füllung registriert wird, aber als Link- oder Textfarbe verfehlt er den Mindestwert von 4,5:1 für Fließtext, den er auf Weiß mühelos übertraf.

Zu matt, um sich wie es selbst anzufühlen. Farben wirken vor dunkler Umgebung weniger farbig — der perzeptive Effekt hinter dem Chroma-Boost der abgeleiteten Rampe — sodass ein Wert, der sich ausreichend abhebt, trotzdem flach wirken kann: eine grauere Version der Marke. Die beiden Fehler verstärken sich gegenseitig: Die Verdunkelung der Umgebung dämpft die Farbe genau dann, wenn sie auch weniger Helligkeitskontrast hat, auf den sie sich stützen kann.

Welche Stufe übernimmt die Aufgabe der Marke im Dark Mode?

Eine hellere, aus der Rampe, die die Marke bereits besitzt. Die Rampe existiert genau deshalb, damit die Marke eine Familie verwandter Werte ist statt einer einzigen Koordinate; im Dark Mode richtet sich die Akzent-Rolle neu aus — vom Kern auf eine Stufe, die ein oder zwei Positionen heller liegt, und die Werte stammen aus der abgeleiteten dunklen Rampe — dieselbe Ausgangsfarbe, eine eigene Helligkeitskurve, das Chroma um ≈20 % angehoben, um der Dämpfung entgegenzuwirken.

Der Grund, warum das keine Wiedererkennung kostet: Die menschliche Farbwahrnehmung beurteilt Farbe relativ zu ihrer Umgebung, nicht als absolute Werte — die Farbkonstanz des visuellen Systems — sodass ein helleres, etwas stärker gesättigtes Blau in der Rolle der Marke auf einer dunklen Seite als dasselbe Markenblau gelesen wird. Es ist dieselbe Equity-Logik, auf die sich Rebrandings verlassen: Farbton plus Rolle tragen die Identität; die exakte Koordinate ist verhandelbar.

Wie sehen die Zahlen für ein echtes Markenblau aus?

Nimm #2563eb als Light-Mode-Kern und leite die dunkle Palette aus derselben Ausgangsfarbe ab. Die Akzentstufe der dunklen Rampe landet bei etwa ≈oklch(0.70 0.14 262.9) — ≈#6F9CF5 — sichtbar heller und mit mehr Chroma, als die helle Rampe bei dieser Helligkeit hält (dort ≈0,115; der ≈20-%-Boost der dunklen Rampe hebt die Anforderung auf ≈0,14, immer noch innerhalb der Farbraum-Obergrenze (Gamut) von ≈0,157 bei dieser Helligkeit und diesem Farbton).

Öffne diese Ausgangsfarbe mit ihrer abgeleiteten dunklen Rampe in Scale Composer — der helle Kern und die dunkle Akzentstufe, jeweils auf ihrer eigenen Kurve markiert, der Chroma-Boost sichtbar in den Werten der dunklen Rampe.

Was passiert mit Buttons und ihren Labels?

Die letzten beiden Zeilen der Tabelle sind der Teil, der Teams überrascht: Das Label kippt. Der Light-Mode-Button ist eine mittelblaue Füllung mit weißem Text — ≈5,2:1, bequem lesbar. Die Dark-Mode-Akzentstufe ist so hell, dass weißer Text darauf auf ≈2,7:1 fällt und versagt, während ein fast schwarzes Label mit ≈6,4:1 besteht. Eine Füllung, die in einem Theme weißen Text trug, will im anderen dunklen Text.

Deshalb müssen onFill-Rollen pro Theme neu geprüft und nicht einfach angenommen werden — Scale Composer leitet sie zusammen mit den übrigen semantischen Rollen neu ab, sodass das Button-Label im Dark Theme ein geprüfter Wert ist und keine geerbte Gewohnheit. Jeder Workflow, der eine Palette von Hand überträgt, braucht dieselbe Disziplin: jedes Füllung-plus-Label-Paar auf der dunklen Seite erneut verifiziert.

Überstehen große Markenflächen die Übersetzung?

Meist nicht unverändert. Ein kräftiger, randlos gefüllter Marken-Hero — das gesättigte blaue Band, das die Light-Mode-Landingpage eröffnet — wirkt auf einem dunklen Screen tendenziell erdrückend: ein großes, helles Feld mit hohem Chroma ist genau das, was die lichtschwache Umgebung des Dark Mode zu vermeiden versucht. Das Muster, das sich übertragen lässt, ist die Umkehrung der Menge, nicht der Farbe: getönt-dunkle Flächen (ein Fast-Schwarz mit dem Markenfarbton darin), die kleine, kräftige Akzente tragen. Die Marke bleibt im Unterton der Fläche präsent und konzentriert sich auf die Momente, die zählen — Buttons, Links, Highlights — statt über die ganze Region gestrichen zu sein.

Und das Logo?

Logos sind Assets, keine Tokens: Eine Token-Pipeline kann eine Farbrolle neu ableiten, aber sie kann weder die Interna eines SVG noch eine Raster-Bildmarke neu einfärben. Die ehrliche Ein-Satz-Antwort lautet: Liefere ein Asset in einer Dark-Variante aus — dieselbe Bildmarke, angepasste Füllungen — und wechsle es mit dem Theme, genauso wie die Werte wechseln.

Führe den Wechsel an deiner eigenen Marke durch

Das Kippen des Labels ist die Prüfung, die sich vor dem Ausliefern am meisten lohnt. Führe die On-Fill-Prüfung an der dunklen Akzentstufe durch — die abgeleitete dunkle Rampe deiner Ausgangsfarbe, die Füllung-und-Label-Kombination des Akzents neu verifiziert für das Dark Theme, damit der Button, der mittags im Light Mode funktioniert, auch um Mitternacht im Dark Mode funktioniert.