Farbwerte in Chrome entsprechen nicht den definierten Farben im CSS

In unserem heutigen Blogpost behandeln wir eine kuriose Begebenheit der Frontend-Entwicklung und spannen dann einen Bogen zu technischen Hintergründen von Anzeigegeräten, um das Phänomen erklären zu können.

Browser stellen Farben unterschiedlich dar

Eventuell kennen Sie das Phänomen, dass unterschiedliche Browser auf demselben Bildschirm Farben unterschiedlich darstellen. Im Beispiel unten stellen wir das k-webs Rot #ff3500 links in Google Chrome und rechts in Microsoft Edge dar:

Unterschiedliche Farbdarstellung in Chrome und Edge

Bei genauerem Betrachten fällt auf: derselbe Farbwert wird deutlich unterschiedlich dargestellt. Interessanterweise unterscheidet sich in Chrome auch der angezeigte Farbwert von dem im CSS Definierten. Wenn die Farbfläche über den in den Dev Tools integrierten Color Picker ausgewählt wird, zeigt Chrome den neuen Farbwert #f03404.

Neuer Farbwert in Chrome

Ein User auf Stackoverflow beschreibt hier das gleiche Problem.

Technische Hintergründe – Monitore und Farbräume

Die Ursache dieses Phänomens liegt in den technischen Details des verwendeten Monitors. Im Beispiel wurde ein externer Monitor verwendet, der über einen Laptop PC betrieben wird. Tatsächlich wird dieselbe Farbe auf dem integrierten Bildschirm nicht verändert, sondern bleibt bei #ff3500.

Monitore, Fernseher, Handydisplays – alle greifen auf eine definierte „Auswahl“ an Farben zurück, den Farbraum des jeweiligen Monitors. Hierbei können verschiedene Standards verwendet werden, bekannte Vertreter sind sRGB, Adobe RGB oder auch NTSC. Diese unterscheiden sich ein wenig in der Farbwiedergabe und ihrer Vielfalt an Farben, wie beispielsweise in diesem Artikel auf eizo.com im Detail erläutert wird.

Derzeit ist der sRGB-Farbraum am weitesten verbreitet und dieser wurde auch als Standard für das Web festgelegt.

Moderne Browser erkennen Farbraum

Bis vor einiger Zeit konnte es darum passieren, dass Farben im Web auf einem Monitor mit einem anderen Farbraum als sRGB nicht ganz korrekt dargestellt wurden. Apple nutzt beispielsweise seit 2015 den grösseren DCI-P3 Farbraum auf einigen Geräten. Um zu verhindern, dass Farben falsch dargestellt werden, wurde in Apples Safari eine Funktion integriert, die den Farbraum des Monitors erkennt und Farben dementsprechend anpasst.

Inzwischen haben auch andere Browser diese Funktion übernommen, so auch Google Chrome oder Mozilla Firefox. In diesen Browsern werden Farben auf nicht-sRGB Monitoren so angepasst, dass sie der ursprünglich definierten Farbe am nächsten kommen. So wird in unserem Beispiel aus der sRGB-Farbe #ff3500 auf einem NTSC-Monitor der Farbwert #f03404. Das ist des Rätsels Lösung.

Wir hoffen, dieser Artikel war aufschlussreich und konnte das Thema etwas verständlicher machen. Falls Sie Fragen oder Anmerkungen dazu haben, hinterlassen Sie doch einfach einen Kommentar. Wir freuen uns über jede Form von Feedback!

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.