Skip to main content
A
Anonymous
June 10, 2020
Answered

Desaturated Web Colours

  • June 10, 2020
  • 2 replies
  • 1153 views

If possible, could someone please tell me how to overcome the following issue:

 

I’m attempting to add an image to a website.  I’d like its colour to match seamlessly with the website’s default background.  Unfortunately, I’ve been unable to achieve this.

 

Please see the attached screenshot blow (Book image embedded into site).

 

I’m using Photoshop 21.1.3, on an iMac (‘iMac’ default colour display).  I create the book image with a blue background of R:0 / G:120 / B:212 – to match that of the website (as highlighted in screenshot). The Photoshop Colour Profile is sRGB IEC61966 and I export as PNG sRGB.

 

Unfortunately, when uploaded, the blue background of the book image seems slightly desaturated compared to the blue of the actual site.

 

If anyone could help resolve this that would be much appreciated.

 

 

This topic has been closed for replies.
Correct answer

In addition, I found just leaving it (Website / Browser / Computer ??) for 24 hours seemed to work too - The book image now looks fine on mine and other displays.

 

2 replies

D Fosse
Community Expert
D FosseCommunity Expert
Community Expert
June 10, 2020

You can't measure directly off screenshots. Those values have already been converted into the monitor profile, and so the numbers will be different from an sRGB source.

 

To get around this, assign your monitor profile to the screenshot in Photoshop. Then convert to sRGB.

 

If your monitor profile is accurate, you should now have a perfect match. But if you're using a generic system monitor profile it may not be accurate enough. A good calibrator is recommended here.

 

In a pinch, an alternative approach is to work directly in your monitor color space. Just as long as it's understood that this is just temporary. Convert the result to sRGB when you have a match.

 

You also need to use a web browser that treats untagged material such as graphic elements as sRGB and color manages it accordingly. Most major web browsers do this today including Safari.

    A
    Anonymous
    June 11, 2020

    Thank you D_Fosse this is much appreciated, there are quite a few elements to take into account.

    A
    Anonymous
    Correct answer
    June 11, 2020

    In addition, I found just leaving it (Website / Browser / Computer ??) for 24 hours seemed to work too - The book image now looks fine on mine and other displays.

     

    TheDigitalDog
    TheDigitalDog
    Inspiring
    June 10, 2020

    Gotta have a color managed browser if you expect it and Photoshop to match. And you can't control when other users don't use a color managed browser. 

    Author “Color Management for Photographers" & "Photoshop CC Color Management/pluralsight"
    A
    Anonymous
    June 11, 2020

    Thank you for your prompt reply thedigitaldog, I’ll bear this in mind.

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