Warum unterscheidet sich die Hex-Farbe in meinem PNG vom gleichen Hex-Code im Browser?

Hier ist ein Problem, das ich anscheinend nicht lösen kann: Ich habe ein PNG-Bild mit einem kleinen blauen Dreieck. Es ist ein Asset, das für eine Website verwendet wird, die ich mit einem Entwickler erstelle. Das Aussehen seines Blaus ist ein bisschen anders, es unterscheidet sich nur geringfügig von der gleichen Hex-Farbe, die über CSS auf Elemente angewendet wird.

Wenn ich das PNG in Photoshop untersuche, gibt mir das Abtasten des Blaus genau den gleichen Hex-Code wie das, was in CSS verwendet wird, aber sie sehen anders aus, wenn sie beide in einem Browser angezeigt werden. Woher?

Ich sollte beachten, dass ich einen kalibrierten Monitor habe und Farben verwalte, aber ein Hex-Code ist ein Hex-Code, egal in welchem ​​​​Profil Sie sich befinden. Das Umschalten von Profilen sollte den Hex-Code nicht beeinflussen.

Verschiedene Farbeinstellungen
Ein Hex-Code ist nicht gleich, egal in welchem ​​Profil Sie sich befinden, das ist genau das, was ein Profil tut – Ihnen sagen, was dieser Hex-Code bedeutet.
Nun, genau das meinte ich; Was Sie sehen, kann auf verschiedenen Bildschirmen unterschiedlich sein, aber der Code bleibt derselbe. Warum zeigt mein Bildschirm nun eine andere Farbe für dasselbe Hex in CSS als das, was Photoshop mir zeigt? Photoshop verwendet nur mein allgemeines Farbprofil.
ist das Profil sRGB IEC 61966-2-1? Wenn dies nicht der Fall ist, entspricht dieser Hex-Code einer anderen Farbe.
Hallo RaymonV, willkommen bei GDSE und danke für deine Frage. Wenn Sie mehr über die Website erfahren möchten, besuchen Sie bitte das Hilfezentrum oder pingen Sie einen von uns im Grafikdesign-Chat an , sobald Ihr Ruf ausreichend ist (20). Tragen Sie weiter bei und genießen Sie die Seite!
Meine Photoshop-Farbeinstellungen sind sRGB IEC61966-2.1 und die Farbverwaltungsrichtlinie besteht darin, eingebettete Profile beizubehalten Datei gibt mir immer noch das gleiche Hex für das Blau
Könntest du das Bild posten?
Hier ist es, das Blau soll #1c314c sein. Ich sollte auch beachten, dass der Farbunterschied auf meinem Windows-Computer deutlicher ist als auf meinem Mac und mein Windows-Bildschirm nicht kalibriert ist. raymonvanvught.com/wp-content/uploads/2016/10/…
Nun, es funktioniert perfekt für mich, also bin ich mir nicht sicher, was das Problem ist ... könnten Sie irgendwo einen Link finden, wo Sie das Problem sehen?
Ich kann die Website, auf der sie gehostet wird, nicht freigeben, da sie noch unter Embargo steht, aber hier ist ein Screenshot, den ich vom Bild im Kontext auf meinem Windows-Computer gemacht habe. Sie können deutlich sehen, dass das Dreieck einen anderen Farbton hat. raymonvanvught.com/wp-content/uploads/2016/10/color-diff.png
Übrigens habe ich eine Runde gemacht und mir die Bildschirme einiger meiner Kollegen angesehen (wir haben unterschiedliche Bildschirme) und auf ihren sieht es in Ordnung aus. Nun, das führt mich zu dem Schluss, dass es sehr wahrscheinlich ist, dass mein Windows-PC-Bildschirm der Übeltäter ist. Jetzt frage ich mich immer noch wirklich, was diesen einen Bildschirm dazu bringt, sich so zu verhalten ...

Antworten (1)

Dies kann in Kombination der folgenden Gründe auftreten:

  • Profil im Farbmanagement des Betriebssystems.
  • Profil in den Farbeinstellungen von Photoshop.
  • Profil in Ihrem Bild enthalten.

Ihr Problem sieht so aus, als hätte Ihr Bild dasselbe Profil wie Photoshop, unterscheidet sich jedoch vom Profil des Betriebssystems.

Ihre CSS-Farbe und Bildfarbe sind also genau gleich, aber die CSS-Farbe wurde mit dem Farbprofil des Betriebssystems und das Bild mit dem enthaltenen Profil angezeigt. Infolgedessen sehen Sie unterschiedliche Farben aufgrund unterschiedlicher Konvertierungen durch unterschiedliche Profile.

Versuchen Sie, Ihr Bild in Photoshop zu öffnen, und speichern Sie es erneut mit „Für Web speichern“, stellen Sie sicher, dass die Option „Farbprofil einbetten“ deaktiviert ist, und sehen Sie es sich dann erneut im Browser an.

Wenn Sie für das Web (Bildschirme) arbeiten, um Farbprobleme zu vermeiden:

  • Stellen Sie in Windows und Photoshop dieselben Farbprofile ein (sRGB wäre die beste Wahl).
  • Fügen Sie keine Farbprofile in Bilder ein (eingebetten).
  • Passen Sie in den Monitoreinstellungen an, was Sie sehen möchten, und nicht über Profile oder Grafikkartentreiber.
Warum unterscheidet sich die Hex-Farbe in meinem PNG vom gleichen Hex-Code im Browser?
AntwortenHierDatenschutz-Bestimmungen1y, 1v