18

One of my friends, a graphic designer told me recently that sometimes colors in Photshop look slightly different than the ones rendered in browser.

I know it is possible when you save a file and then use it on a website due to palettes, but he uses given color in PS, for example #b81e1e, then he creates a DOM element and sets its background to #b81e1e and the color is rendered differently in browser than in PS (I guess it's not that subtle as he can easily spot it). It's not a regular thing and it doesn't happen always, but he states it happened to him a few times, although he can't really tell me with witch colors.

Is it even possible? Because I have never really heard about anything like this & nothing like this ever happened to me...

Improve this question

8 Answers 8

Reset to default
25

This is most likely a color profile issue.

First off, he should be working RGB and not CYMK or another color space. This is easy enough to check, simply go to Image > Mode and ensure it's set to RGB. My guess is it probably is.

The second issue is a color profile. This may be set to something else. It should be using sRGB IEC61966-2.1, which is considered a standard for most PC monitors. The easiest way to check this is to go to Edit > Color Settings. If it's set to the "North America General Purpose 2" or "North America Web/Internet" it should be working fine.

The final step is to setup a "proof setup" that will set a monitor color preview. Go to "View > Proof Setup > Monitor RGB". Then, you can toggle on/off the proof colors by using the shortcut (depends on OS) for Proof Colors, which is under the View toolbar.

I'm not intimately familiar with color profiles in Photoshop, but these are the steps I take if I find color mismatches. Normally it's a non-issue for me.

more info on color profiles

Improve this answer
8
  • To add to that, I'd also say make sure you're viewing it on the same monitor as well, just to verify as different monitors will display things differently.
    – Hanna
    Jan 10, 2014 at 16:38
  • 7
    Choosing "Monitor RGB" in View > Proof Setup fixed the problem with wrong colors. I think it was switched by mistake with some keyboard combination.
    – vovahost
    Mar 25, 2015 at 17:31
  • @vovahost, this is very common, in fact my first run-in with color problems was that exact issue (accidental hotkey)
    – Mattc0m
    Apr 22, 2015 at 19:57
  • Oh. My. God. 15 years working with Photoshop and I've never used that setting. Somehow it switched to CMYK. It doesn't appear to be relative to the open document, as I just started a new App from a default preset. So either it came from a previous opened document or a hotkey, like you said. Thanks so much, I'll be keeping a closer eye on this setting and use it!
    – Chase
    Feb 2, 2016 at 23:39
  • This completely solved my issue. I've used photoshop for years and didn't know about it either, I just thought that it was because the document was in CMYK. It wasn't until I saw it on another colleagues computer did I realise it was wrong.
    – Alex McCabe
    Feb 9, 2017 at 9:51
4

Aware I'm very late to the party - Had the same issue and after trying the previous answers I still had the problem, hopefully this helps someone else in future -

The fix that worked for me: File > Save For Web > Uncheck 'Convert to sRGB' > Save

Improve this answer
1
  • Thank you! This saved me a long headache.
    – hockey2112
    Jul 28, 2020 at 0:02
3

As an update for Photoshop CC also change:

EDIT> CONVERT TO PROFILE... and set Destination Space Profile to sRGB IEC61966-2.1

That was my particular problem.

Improve this answer
2

In addition to color profiles Mattc0m's answer speaks about, the bigger problem is the monitors themselves.

If I simply adjust the brightness and contrast on my monitor, it displays color differently.

I have two mismatched monitors on my setup. They are both plugged into the same hardware and have each been calibrated with the same calibration device and they each have their individual custom calibration profile loaded at startup. They do not display color the same.

When I upload an image to a webserver for the world, I have zero control over the client's browser (which may or may not honor embedded profiles) and the client's monitor. You learn to accept the slack.

Improve this answer
1

It's possibly because of your browser is not color managed. Try using Firefox and turning on Color Management as descibed here (http://www.gballard.net/photoshop/srgb_wide_gamut.html#) and see if sth will change.

Improve this answer
1

Make sure you use the "export for web" function. That way it will convert the colors to a format that will appear in the browser the same way it did on your photoshop canvas.

Improve this answer
1
  • 1
    Hi Dominik, welcome to GDSE and thanks for your answer. If you have any questions, 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
    May 28, 2015 at 11:09
-3

When selecting a color, there's a small checkbox at the bottom left that says, "Only Web Colors". Make sure it's checked, and you should be fine.

Improve this answer
2
  • Can you please elaborate further?
    – Welz
    Apr 26, 2018 at 11:35
  • This is a terrible idea; You're limiting yourself to a very small palette of colors (216 to be precise) and this will only prevent color differences on devices that only display color in 8-bit (which these days is basically none)
    – Cai
    Apr 26, 2018 at 12:10
-5

Found this video for a quick FIX. Its roughly a 1 minute video that shows how to fix the color profile issue so images show up properly in Adobe Photoshop. https://www.youtube.com/watch?v=aB_xN2kLVCE

Improve this answer
1
  • 1
    do not post a link-only answer, please explain what we'll find behind that link. If you want to know more about the site, please see the help center. Keep contributing and enjoy the site!
    – Luciano
    Apr 5, 2017 at 8:50

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.