Copy link to clipboard
Copied
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.
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.
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
...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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Thank you for your prompt reply thedigitaldog, I’ll bear this in mind.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Thank you D_Fosse this is much appreciated, there are quite a few elements to take into account.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Did you save the PNG as 24 or 8 bit? It almost looks like 8 bit, and the color table has shifted the color. When I assign sRGB to your capture the HTML background values are correct and it previews as expected. Does the color match if you save the sRGB image as a JPG?
Copy link to clipboard
Copied
Hi rob_day,
The original was a PNG in 8 bit. I attempted to upload a 24 bit version and there is no difference. However, thank you for the JPEG suggestion - I’ve experimented with a few JPEGs now and all seem to match the colour instantly!
Copy link to clipboard
Copied
I attempted to upload a 24 bit version and there is no difference.
Did you go back to the original RGB art and export a 24-bit PNG, or did you simply convert the 8-bit to 24-bit? The latter option would not work.
Copy link to clipboard
Copied
I exported from the original.
Copy link to clipboard
Copied
That shouldn’t be happening. Can you share the original?