Highlighted

Desaturated Web Colours

Community Beginner ,
Jun 10, 2020

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.

 

book_image_site_2.png

 

Adobe Community Professional
Correct answer by D Fosse | Adobe Community Professional

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.

TOPICS
How to, Mac, Problem or error

Views

481

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Desaturated Web Colours

Community Beginner ,
Jun 10, 2020

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.

 

book_image_site_2.png

 

Adobe Community Professional
Correct answer by D Fosse | Adobe Community Professional

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.

TOPICS
How to, Mac, Problem or error

Views

482

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 10, 2020 0
Adobe Community Professional ,
Jun 10, 2020

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2020 1
Community Beginner ,
Jun 11, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2020 0
Adobe Community Professional ,
Jun 10, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2020 3
Community Beginner ,
Jun 11, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2020 0
Community Beginner ,
Jun 11, 2020

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.

 

Screen Shot 2020-06-11 at 16.28.03.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2020 0
Adobe Community Professional ,
Jun 11, 2020

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?

 

Screen Shot.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2020 1
New Here ,
Jun 17, 2020

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2020 0
Adobe Community Professional ,
Jun 17, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2020 0
New Here ,
Jun 18, 2020

Copy link to clipboard

Copied

I exported from the original.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2020 0
rob day LATEST
Adobe Community Professional ,
Jun 18, 2020

Copy link to clipboard

Copied

That shouldn’t be happening. Can you share the original?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2020 0