Why is the hex color in my PNG different from the same hex code in browser?


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.

10/4/2016 1:48:00 PM

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.
10/6/2016 2:30:00 PM