Skip to main content
B
binht77302485
Participant
September 16, 2019
Question

Colors on website look different to Photoshop

  • September 16, 2019
  • 1 reply
  • 2970 views

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

    This topic has been closed for replies.

    1 reply

    D Fosse
    Community Expert
    D FosseCommunity Expert
    Community Expert
    September 16, 2019

    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.

     

     

      B
      binht77302485Author
      Participant
      January 9, 2020

      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
      Community Expert
      D FosseCommunity Expert
      Community Expert
      January 9, 2020

      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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices