Colors on website look different to Photoshop

[binht77302485]

Hi guys, 

How do I match the color from Photoshop to Website? 

Consistently, the photo's colors that I see on Photoshop is very different to the photo I post online (Facebook, Instagram, Pixieset...). All of them are viewed by the same monitor. How do I prevent this? 

I attached the screenshots (same monitor) of the same photo on Photoshop, on Facebook and also the Color Space's setting which is sRGB (recommended for web).

If anyone and tell me how to solve it permamently, I'd appreciate it. TIA

[D Fosse]

Use a color managed web browser and make sure the color profile (sRGB) is embedded in the file. It's not enough to convert to sRGB. Export/Save For Web will strip the profile at default settings. You need to check the "embed profile"-box.

Photoshop's color settings are just defaults for new files. An embedded profile will always override it - except if there is no profile. Then the working space gets assigned.

The monitor doesn't matter here. There is still a difference between a color managed application and a non-color managed application. The former converts the data from the document profile into the monitor profile and sends that to the monitor; the latter doesn't do that and just passes on the original numbers.

You need both profiles. A document profile in the file, and a monitor profile on system level.

Color management corrects for the monitor on a very detailed level and with very high precision. As long as the monitor profile is accurate (for which you really need to use a calibrator), Photoshop will always be more correct than an application that doesn't support color management. But you need to embed the profile.

Most major web browsers are color managed, with the notable exception of Edge. It will never display correctly and can not be trusted.

[binht77302485]

Thank you. I have this really odd thing going on: 

I have 2 laptops (A & B), the colors on both look very identical; however, after I posted the same photo on IG, FB, Pixieset... and viewed each on Google Chrome (the same most recent version), the photo on Google Chrome from Laptop A looks exactly like the actual photo, but the photo on Google Chrome viewed on Laptop B looks more green. Again, if I view the photo offline, they look identical on both laptop. The difference only shows after I uploaded the photo online. What causes this problem and how could I fix it? 

I don't know if this is relevant, Laptop A is a Window 10 and Laptop B is a Window 7.

Thank you. 

[D Fosse]

The answer is the same as above. The question is always whether the file is displayed correctly - and it only displays correctly when color management works as it should. The document profile needs to be correctly converted into a valid monitor profile, and these data sent to screen.

If it doesn't work, it can have obvious reasons like no embedded document profile, or it can be more subtle ones like a defective monitor profile. That can often affect color managed applications differently. In fact such a difference is a smoking gun. Color managed applications should always display identically, and when they don't, the prime suspect is a defective monitor profile.

[binht77302485]

Thank you for replying; though, I'm very confused now.

Like you said, if the color doesn't look the same then color management is
off somewhere, that would explain why on Laptop B, the color looks
different from online to Photoshop; however, if that's the case, then how
comes on Laptop A, the color looks identical from online to Photoshop? If
color management is off, then should it be off on both, not just one?

Also, if it's defective monitor profile, then how comes the photos (before
posting online) look identical on both laptops? If one of them has
defective monitor profile, should it be different to the other laptop?

[NB, colourmanagement]

Hi

you wrote:

if it's defective monitor profile, then how comes the photos (before
posting online) look identical on both laptops? If one of them has
defective monitor profile, should it be different to the other laptop?

as DFosse explained, if the monitor profile is defectiev it can affect differernt applications differently. 

I'd also check you are

1: saving the images with an icc profile embedded (sRGB would be the best choice fro image colorspace)

2: using the same web browser [same version, with a same colormanagement settings] on both laptops [you'll maybe need to google browser colormanagement]. 

I hope this helps

if so, please "like" my reply

thanks

neil barstow, colourmanagement.net

[please do not use the reply button on a message in the thread, only use the one at the top of the page, to maintain chronological order]

[D Fosse]

That's right. In this case, a bad monitor profile may still work correctly in Photoshop, but not in Chrome. This is in fact quite common with defective profiles. Usually it's because the profile doesn't conform strictly to icc specification. Monitor profiles are quite complex, and they are handled in each application using application-specific code.

Most people think that the monitor profile "adjusts the monitor", and so it should affect all software equally, but that's not correct. They don't adjust anything. The monitor profile is a standard icc profile, just like for instance sRGB or Adobe RGB, and it is used by the application in a standard profile conversion. The only difference from any profile conversion you do in Photoshop, is that it happens on the fly, under the covers and without any user intervention.