Farben werden in Webbrowsern und Bildbearbeitungssoftware unterschiedlich angezeigt

Sie sollten kein Farbprofil in Bilder für Websites einbetten. Sie vergrößern das Bild, fügen aber keine nützlichen Informationen hinzu, sodass Sie Ihre Seiten nur dicker machen. Achten Sie beim Speichern für Web und Geräte aus Photoshop darauf, „Farbprofil einbetten“ zu deaktivieren. Lassen Sie aus Sicherheitsgründen "In sRGB konvertieren" aktiviert (falls Sie es mit einem Bild in einem anderen Farbraum zu tun haben und vergessen, es zu konvertieren).

Wenn Sie Ihre Farben aus Photoshop auswählen, ist das in Ordnung, solange Sie das Farbmanagement für RGB-Dateien deaktivieren. Wenn es nicht deaktiviert ist, erhalten Sie möglicherweise die falschen Farbcodes. Deaktivieren Sie also entweder den Arbeitsbereich für RGB oder stellen Sie ihn auf Monitor RGB ein.

Wenn Sie sich die folgenden Beispiele mit einem JPG- vs. PNG-Bild ansehen, sehen Sie, wie Browser Farbcodes ausgeben. Der obere Wert stammt von Chrome und der untere von FireFox. Als Quelle verwenden beide ein unkomprimiertes 24-Bit-PNG und ein unkomprimiertes JPG.

JPG

PNG

Die Werte sind mit den Standardeinstellungen nicht zu weit entfernt. Stellen Sie jedoch am besten sicher, dass Sie „Farbprofil einbetten“ für JPGs nicht aktiviert und „In sRGB konvertieren“ deaktiviert haben, wenn Sie aus Photoshop über „Für Web speichern“ exportieren.

Der beste Weg, um das richtige Ergebnis zu erzielen, ist mit PNGs vs. JPGs.

tl;dr: Versuchen Sie nicht, die Farbe im Webdesign im Mikromanagement zu verwalten.

Jeder Bildschirm ist anders, jedes Mal, wenn Sie diesen Bildschirm verwenden, ist die Beleuchtung anders und sogar derselbe Bildschirm im selben Moment kann von verschiedenen Benutzern unterschiedlich gesehen werden. Der Versuch, das Farbmanagement so zu gestalten, dass Farben jedes Mal online genau reproduziert werden, ist Zeit- und Mühenverschwendung.

Ja, durch die Berücksichtigung von Farbprofilen kommen Sie dem schon ziemlich nahe und erhalten vielleicht sogar eine exakte Wiedergabe Ihrer Photoshop-Farbe in Ihrem Browser auf Ihrem Bildschirm. Dann zeigen Sie Ihren Prototypen Ihrem Kunden, der ihn sich entweder auf einem mobilen Gerät oder einem Monitor ansieht, der in 99,98 % der Fälle anders kalibriert ist als Ihr Bildschirm – wenn er überhaupt kalibriert ist.

Hinzu kommt die Tatsache, dass sich die Augenlinse des Menschen mit zunehmendem Alter leicht verfärbt, was dazu führt, dass sie Farben mit zunehmendem Alter gelblicher wahrnehmen. Hinzu kommt, dass sich die Farbwahrnehmung je nach Intensität und Farbe des Lichts verändert, das auf den Bildschirm fällt, mit dem es betrachtet wird. Hinzu kommt, dass einige Bildschirme gedimmt oder aufgehellt werden können, weil ihr Benutzer es so bevorzugt. All diese Faktoren vereiteln Ihre Bemühungen um Farbmanagement.

Verstehen Sie mich nicht falsch, ich sage nicht, dass Sie kein Farbmanagement vornehmen und einfach etwas auswählen sollten, das „nah genug“ ist. Versuchen Sie, Ihre Farben genau zu reproduzieren, aber denken Sie daran, dass die Big Wide World™ alles tun wird, um die Dinge aufzurütteln.

Wenn man bedenkt, dass die von Ihnen beobachteten Abweichungen in der Größenordnung einer einzelnen RGB-Einheit auf einer Skala von 0 bis 255 liegen, sind sie für alle praktischen Mittel und Zwecke vernachlässigbar . Wenn die Farben um 10 Einheiten oder mehr abweichen würden, würde ich anfangen, mir Sorgen zu machen. Aber selbst wenn sie auf einem Bildschirm direkt nebeneinander aufgestellt werden, wird die überwiegende Mehrheit der Betrachter nicht in der Lage sein, zwei Farben zu unterscheiden, die sich nur um eine Einheit unterscheiden.

Sparen Sie sich die Zeit und Mühe und lassen Sie es einfach.