Neue Farbräume und Dark Mode: Markenfarben im Web kräftiger und zugänglich
seit 2024steuert die CSS-Funktion light-dark() Hell- und Dunkelmodus in allen großen Browsern [2]
Moderne Browser können Farben darstellen, die über das klassische sRGB hinausgehen, und Hell- und Dunkelmodus direkt in CSS steuern. Was OKLCH, Display-P3 und light-dark() für Markenfarben bedeuten.
Das Wichtigste in Kürze
Das Web kann mehr Farben als früher. Seit 2023 verstehen alle großen Browser neue Farbräume und Farbfunktionen aus CSS Color 4 [4][3]. Mit OKLCH lassen sich Farben nach Helligkeit, Buntheit und Farbton beschreiben [1], mit Display-P3 werden auf modernen Bildschirmen kräftigere Töne möglich [3]. Und seit 2024 schaltet die Funktion light-dark() zwischen Hell- und Dunkelmodus um, ohne doppelte Stylesheets [2]. Für Markenfarben heißt das: näher am Druck, sauber im Dunkelmodus und mit berechenbarem Kontrast.
OKLCH: Farben, die sich vorhersehbar verhalten
OKLCH beschreibt eine Farbe im Oklab-Farbraum mit drei Werten: Helligkeit (L), Buntheit (C) und Farbton (h) [1]. Der Vorteil gegenüber den bekannten Hex- oder RGB-Werten: Zwei Farben mit gleicher Helligkeit wirken auch gleich hell. Wer eine Farbskala für Buttons, Hover-Zustände und Flächen braucht, ändert nur die Helligkeit und behält Farbton und Charakter.
Für ein Design-System ist das Gold wert. Aus einer Markenfarbe entsteht eine ganze Skala von hell bis dunkel, ohne dass der Farbton kippt. Und weil die Helligkeit direkt im Wert steht, sieht man schon beim Anlegen, welche Stufen für Text auf hellem Grund in Frage kommen.
Display-P3: kräftiger, wo der Bildschirm es kann
Das klassische sRGB deckt nicht alle Farben ab, die moderne Bildschirme zeigen können. CSS Color 4 erlaubt Farben in größeren Farbräumen wie Display-P3 [3]. Gerade leuchtende Grün-, Orange- und Rottöne aus Corporate Designs, die im Druck kräftig sind, wirkten im Web bisher oft blass.
Wichtig ist eine saubere Rückfalllösung: Auf Bildschirmen, die den Farbraum nicht darstellen, bildet der Browser die Farbe auf den nächsten darstellbaren Ton ab [3]. Wir legen deshalb jede kräftige Farbe so an, dass sie auch auf einem einfachen Bildschirm gut aussieht und den Kontrast hält.
Dunkelmodus mit light-dark()
Viele Menschen nutzen den Dunkelmodus ihres Systems. Mit light-dark() bekommt jede Farbe zwei Werte, einen für hell und einen für dunkel, und der Browser wählt passend zur Einstellung [2]. Voraussetzung ist, dass die Seite beide Modi über color-scheme freigibt [2]. Seit Mai 2024 funktioniert das in allen großen Browsern [2].
Ein guter Dunkelmodus ist mehr als invertierte Farben. Markenfarben brauchen oft eine hellere Variante, damit sie auf dunklem Grund nicht absaufen, und die Kontrastregeln gelten in beiden Modi: 4,5 : 1 für normalen Text, 3 : 1 für große Schrift und Bedienelemente [5]. Diese Website ist ein Beispiel: Sie folgt der Einstellung des Systems und prüft die Farben in beiden Modi.
Alt und neu im Vergleich
| Kriterium | Bisher | Heute möglich |
|---|---|---|
| Farbskala aus der Markenfarbe | von Hand, Farbton kippt oft | in OKLCH nur die Helligkeit ändern [1] |
| Kräftige CD-Farben | auf sRGB begrenzt, wirken blass | Display-P3 auf modernen Bildschirmen [3] |
| Dunkelmodus | zweites Stylesheet oder Media-Query je Farbe | eine Zeile pro Farbe mit light-dark() [2] |
| Kontrast prüfen | nachträglich, oft erst nach dem Livegang | beim Anlegen, Helligkeit steht im Wert [1][5] |
Eine Orientierung aus unseren Projekten. Die Zahlen in eckigen Klammern verweisen auf die Quellenliste.
Häufige Fragen zum Thema
Sehen die neuen Farben auf alten Bildschirmen falsch aus?
Nein, wenn sie sauber angelegt sind. Ein Bildschirm, der einen Farbraum nicht darstellen kann, zeigt den nächstgelegenen Ton. Wir prüfen jede kräftige Farbe deshalb auch auf einem einfachen Bildschirm und mit dem Kontrastwert.
Braucht jede Website einen Dunkelmodus?
Nicht zwingend, aber er wird erwartet, weil viele Menschen ihn im System eingestellt haben. Mit light-dark() und Design-Tokens ist der Mehraufwand überschaubar, wenn er von Anfang an geplant wird.
Ändert sich unsere Markenfarbe dadurch?
Nein, sie wird genauer umgesetzt. Oft kommt sie im Web sogar näher an das Druckergebnis heran. Für Text und dunkle Hintergründe ergänzen wir passende Varianten, damit Kontrast und Wiedererkennung stimmen.
Für Agenturen
Wir setzen Markenfarben im Web kräftig und zugänglich um, mit Farbskala, Dunkelmodus und geprüftem Kontrast. White-label und zum Fixpreis.
Sie sind ein Unternehmen? Rückruf vereinbaren
Weiterlesen
- Corporate Design rein, Website raus: Wie aus einem CD ein Web-Design-System wirdEin Corporate Design regelt Logo, Farben und Schrift für Print. Eine Website braucht mehr: Farben als Tokens, Schriftgrößen für jede Breite, Abstände, Komponenten und Kontraste, die von Anfang an passen.
- Design-Tokens als Standard: Ein Format für Farben, Schriften und AbständeSeit Oktober 2025 gibt es einen offenen Standard, mit dem Farben, Schriften und Abstände zwischen Design-Werkzeugen und Code ausgetauscht werden. Was Design-Tokens sind und was Agenturen davon haben.
- Figma- oder KI-Layout umsetzen: Was ein Entwurf mitbringen mussIhre Agentur hat schon einen Entwurf aus Figma oder einem KI-Werkzeug? Wir setzen ihn zum selben Fixpreis in sauberen Code um. Damit nichts nachverhandelt werden muss, sollte er sieben Dinge mitbringen.
Quellen
- MDN Web Docs, oklch() · abgerufen am 29.10.2026
- MDN Web Docs, light-dark() · abgerufen am 29.10.2026
- W3C, CSS Color Module Level 4 · abgerufen am 29.10.2026
- web.dev, New CSS color spaces and functions in all major engines (2023) · abgerufen am 29.10.2026
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2 · abgerufen am 29.10.2026
Recherchiert mit KI-Unterstützung, mit Quellen belegt und inhaltlich geprüft von Mike Joerihsen am .
Diese Inhalte sind eine Orientierung und keine Rechtsberatung. Bei konkreten Fragen zu Ihrer Situation wenden Sie sich an eine Rechtsberatung oder die zuständige Behörde.