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.

Improve this question
11
  • 1
    Different color settings
    – joojaa
    Commented Oct 4, 2016 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
    Commented Oct 4, 2016 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
    Commented Oct 4, 2016 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
    Commented Oct 4, 2016 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
    Commented Oct 4, 2016 at 13:49

1 Answer 1

Reset to default
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 and acknowledge you have read our privacy policy.

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