3

Here is an issue which I can't seem to solve: I have a PNG image with a small blue triangle. It's an asset used for a website that I'm creating with a developer. The appearance of its blue is a bit off, just very slightly different from the same hex color that is put on items through CSS.

When inspecting the PNG in photoshop, sampling the blue gives me the exact same hex code as what is used in CSS, yet they look different while both viewing them in a browser. How come?

I should note I have a calibrated monitor and manage colors, but a hex code is a hex code, no matter what profile you're on. Switching profiles should not influence the hex code.

  • 1
    Different color settings – joojaa Oct 4 '16 at 13:31
  • 3
    A hex code is not the same no matter what profile you're on, that's exactly what a profile does—tell you what that hex code means. – Cai Oct 4 '16 at 13:33
  • Well, that is exactly what I meant; what you see might be different on different screens, but the code remains the same. Now why does my screen show a different color for the same hex in CSS than what Photoshop shows me? Photoshop just uses my general color profile. – RaymonV Oct 4 '16 at 13:38
  • 3
    is that profile sRGB IEC 61966-2-1? If it isn't then that hex code corresponds to a different color. – Cai Oct 4 '16 at 13:40
  • Hi RaymonV, welcome to GDSE and thanks for your question. If you want to know more about the site, please see the help center or ping one of us in the Graphic Design Chat once your reputation is sufficient (20). Keep contributing and enjoy the site! – Vincent Oct 4 '16 at 13:49
3

This can happen in combinations of following reasons:

  • Profile in OS's Color Management.
  • Profile in Photoshop's Color Settings.
  • Profile included in your image.

Your problem looks like your image has same profile as Photoshop but differs from OS's profile.

So your CSS color and image color are exactly same but CSS’s color showed using OS’s color profile and image showed using included profile. As a result, you see different colors because of different conversion made by different profiles.

Try to open your image in Photoshop and then re-save using Save for Web, make sure “Embed Color Profile” option unchecked, then watch again in browser.

When working for web (screens), to avoid color problems:

  • Set same color profiles in Windows and Photoshop (sRGB would be best choice).
  • Don’t include (embed) color profiles in images.
  • Adjust what you want to see in Monitor settings and not through profiles or graphic card driver.
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.