Desaturated Web Colours

Question

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.

Anonymous · Accepted 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.

D Fosse · Answer

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.

サインアップ

ソーシャルログイン

コミュニティへログイン

ソーシャルログイン

ファイルをウイルススキャンする。

このファイルはダウンロードできません