Warum erscheinen Farben in macOS Chrome und Safari im Vergleich zu Firefox ausgewaschen?

Ich verwende ein neues MacBook Pro 15" mit macOS 10.13.4, das mit dem standardmäßigen Farb-LCD-Farbprofil konfiguriert ist. Ich mache einige Grafikdesign-Arbeiten und habe festgestellt, dass alle Farben in Chrome und Safari im Vergleich zu Firefox "verwaschen" erscheinen Letzteres hat gesättigtere/lebendigere Farben, und dies geschieht bei nativen HTML/CSS-Elementen (dh nicht nur bei Bildern).

Hier ist ein Screenshot der SmashingMagazine-Homepage mit dem Vergleich (links Chrome, rechts Firefox). Beachten Sie, wie die Farben in Firefox lebendiger sind (rechts):

Geben Sie hier die Bildbeschreibung ein

Wenn ich das Farbprofil meines Displays auf sRGB IEC61966-2.1 ändere, sehen Chrome und Firefox gleich aus.

Warum ist das? Jede Hilfe wird sehr geschätzt.

Farbmanagement ist ein Minenfeld :/ Einige Browser respektieren eingebettete Profile und andere nicht. Das Bild, das Sie gepostet haben, befindet sich im Anzeigeprofil ... was nicht gut ist. Sie sollten sRGB anstreben, wenn Ihr beabsichtigtes Ziel das Internet ist. Die Verwendung Ihres Anzeigeprofils in Ihrem Workflow wird nicht empfohlen. Die Kalibrierung Ihres Monitors wäre ein guter Anfang, anstatt die allgemeine Profilerstellung zu verwenden. sonst wirst du nie wissen, was richtig war. Teilen Sie uns als Beispiel die beabsichtigten RGB-Werte des oberen roten Balkens mit.
@Tetsujin In meinem Beispiel-Screenshot hat der obere rote Balken eine CSS-Hintergrundfarbe von #d33a2c. Dieser Wert ist in beiden Browsern gleich , aber bei gleichem Display-Farbprofil (Farb-LCD) zeigt Chrome/Safari die Farbe anders an als Firefox. Unabhängig davon, ob das Farbprofil meines Displays kalibriert ist oder nicht, würde ich erwarten, dass der gleiche CSS-Hex-Farbcode in Chrome, Safari und Firefox gleich angezeigt wird. Meine Frage ist, warum ist das nicht so? Soweit ich weiß, gibt es kein Farbmanagement (dh Farbprofile) für CSS.
Es ist nicht wirklich unabhängig von Ihrer Kalibrierung und Ihrem Workflow. Wahrscheinlich liegt es daran . Ich kann hier nicht auf einem kalibrierten Setup reproduzieren. Siehe i.stack.imgur.com/qdVpp.png , aufgenommen von Safari links, Chrome rechts, mit dem darüber schwebenden digitalen Farbmesser. Die Farbe ist bei beiden wie von Ihnen angegeben [innerhalb der Toleranz], wenn Sie in sRGB betrachtet werden. Wenn ich das Messgerät über dieses Repro schwebe, das auf dem Bildschirm aufgenommen, zugeschnitten, dann in Photoshop gespeichert, dann auf imgur gepostet und von Safari aus angezeigt wurde, hat es immer noch die richtige Farbe.
@Tetsujin sehen die Farben für dich zwischen Chrome und Firefox gleich aus? Chrome und Safari sehen für mich gleich aus, also ist das nicht das Problem. Das Problem ist, dass alle Farben auf jeder Webseite in Chrome und Safari (und sogar in der Vorschau-App) im Vergleich zu Firefox stark verblasst erscheinen. Es sieht also so aus, als würde Firefox etwas anders machen. Vielleicht ist mein Farbprofil "Farb-LCD" durcheinander? Oder der Bildschirm meines Macbooks ist defekt? Wenn ich das Farbprofil meines Displays auf „Apple RGB“ oder sRGB ändere, sieht alles in allen Apps konsistent aus. Aber sollte Farb-LCD nicht das richtige Profil für einen MBP-Bildschirm sein?
Ugh, ich habe Firefox noch nie benutzt - absolut meilenweit von dem entfernt, was es sein sollte. Keine Ahnung was die damit machen. Übrigens, das "richtige" Profil für jeden Bildschirm ist das, das Ihr Kolorimeter und Ihre Software generiert. Diejenigen, die Sie in der ursprünglichen Liste erhalten, sind Schätzungen, nicht besser.

Antworten (2)

Damit Firefox wie Chrome und Safari aussieht

Standardmäßig wendet Firefox die Farbkorrektur nur auf Bilder mit eingebetteten Farbprofilen an. Sie können das vollständige Farbmanagement aktivieren , um Farbkorrekturen auf alles anzuwenden, einschließlich der in CSS definierten Farben. Dann sollte es eher wie Chrome und Safari aussehen.

In about:config(tippen Sie das in die Adressleiste ein), setzen Sie gfx.color_management.modeauf 1.

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/3.5/ICC_color_correction_in_Firefox

Farbkorrektur, zu stark vereinfacht

Monitore haben unterschiedliche Reaktionskurven. Beispielsweise kann der Unterschied zwischen #FF0000und #FA0000auf einigen Monitoren erkennbar sein und auf anderen nicht.

Farbprofile enthalten die Verzerrungen, um dies durch Ändern der tatsächlichen Ausgabe zu kompensieren, um den Kontrast und die Gesamtgenauigkeit des beabsichtigten Erscheinungsbilds zu erhalten. Sie können auf Monitore, Drucker und andere Geräte angewendet werden.

Viele Bildformate unterstützen eingebettete Farbprofile; Stellen Sie sich vor, es läuft auf Deskriptoren hinaus, wie es aussehen soll . Wenn das System die Ungenauigkeiten Ihres Monitors kennt, kann es dieses Profil mit dem Bildprofil kombinieren, um die Ausgabe für die bestmögliche Wiedergabe zu verzerren.

Wenn es um Dinge ohne Profile geht, wie etwa Farbwerte in CSS, müssen einige Annahmen über die Absicht getroffen werden.

Angenommen, Ihr Monitor erzeugt tatsächlich einen erkennbaren Unterschied zwischen den beiden zuvor erwähnten ähnlichen Farben. Sie verwenden diese Farben in Ihrem CSS. Die Annahme ist, dass Ihre Absicht darin bestand, den feinen Unterschied zu zeigen. Einige Monitore da draußen zeigen möglicherweise die gleiche Farbe auf dem Bildschirm an, obwohl die beiden Farben an sie gesendet werden. Die Farbkorrektur ändert die an den Bildschirm gesendeten Farben, sodass ein subtiler Unterschied tatsächlich reproduziert wird. Wenn Sie wollten, dass sie gleich aussehen, hätten Sie einfach verwendet #FF0000und sich nie darum gekümmert #FA0000, oder?

Digital Color Meter kennt die verwendeten Farbprofile. Aus diesem Grund gibt es unterschiedliche Werte für dasselbe Bild auf zwei verschiedenen Displays und unterschiedliche Werte, je nachdem, welchen Farbraum Sie ausgewählt haben.

Nicht die beste Beschreibung des Farbmanagements, aber der Eröffnungssatz bringt es auf den Punkt und beantwortet die ursprüngliche Frage. Firefox scheint das sRGB-Profil nicht auf Inhalte ohne Tags (einschließlich CSS-definierter Farben) anzuwenden, während die anderen Browser dies tun. Das ist mir aufgefallen, als ich die Farbe in einer getaggten PNG-Grafik an die CSS-definierte Hintergrundfarbe anpassen musste – in Firefox war sie leicht abweichend. Die Lösung bestand einfach darin, das Farbprofil aus dem Bild zu entfernen. Die Farben sehen in Firefox immer noch gesättigter aus, aber zumindest sind sie intern konsistent.

Lustig, die Antworten der "Experten" zu lesen. Sie müssen lediglich Firefox auf ihren kalibrierten Monitoren gegen ihren Browser laufen lassen, um den wirklichen Unterschied zu sehen. Was auch immer Firefox tut (ja, Firefox, kein Farbprofil, kein Hardwaregerät), es verbessert die Lebendigkeit und bietet ein wärmeres Farberlebnis.

Klingt nach einer schlechten Idee für alle, die zuverlässige Farbe wollen.
Warum erscheinen Farben in macOS Chrome und Safari im Vergleich zu Firefox ausgewaschen?
AntwortenHierDatenschutz-Bestimmungen1y, 1v