• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Desaturated Web Colours

Community Beginner ,
Jun 10, 2020 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

 

Views

784

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
community guidelines

correct answers 3 Correct answers

LEGEND , Jun 10, 2020 Jun 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. 

Votes

Translate

Translate
Community Expert , Jun 10, 2020 Jun 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

...

Votes

Translate

Translate
Community Beginner , Jun 11, 2020 Jun 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.

 

Screen Shot 2020-06-11 at 16.28.03.png

Votes

Translate

Translate
LEGEND ,
Jun 10, 2020 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. 

Author “Color Management for Photographers" & "Photoshop CC Color Management/pluralsight"

Votes

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
community guidelines
Community Beginner ,
Jun 11, 2020 Jun 11, 2020

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Jun 10, 2020 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.

Votes

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
community guidelines
Community Beginner ,
Jun 11, 2020 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.

Votes

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
community guidelines
Community Beginner ,
Jun 11, 2020 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

Votes

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
community guidelines
Community Expert ,
Jun 11, 2020 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

Votes

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
community guidelines
New Here ,
Jun 17, 2020 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!

Votes

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
community guidelines
Community Expert ,
Jun 17, 2020 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.

Votes

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
community guidelines
New Here ,
Jun 18, 2020 Jun 18, 2020

Copy link to clipboard

Copied

I exported from the original.

Votes

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
community guidelines
Community Expert ,
Jun 18, 2020 Jun 18, 2020

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines