Color rendering issue between Photoshop and Google Chrome

[Christopher Liam Ivey]

There have been a lot of posts about images not rendering properly in browsers.  My case is a little different.

I have been using Photoshop to design a GUI for the web.  I set the color space in Photoshop CC to sRGB IEC61966-2.1 and identified Hex values for the UI.

Our web designer then created styles using these exact values, (verified with code inspector).  However, when I capture the screen and examine what Chrome has rendered - the values have all shifted slightly.  In general the colours read as lighter and less saturated than identical Hex values are rendered in Photoshop, using the same working and document color space.

The proof setup in Photoshop is Internet Standard RGB (sRGB), though it doesn't seem to make any difference if I fiddle with that.  While the monitor will display the captured graphics differently if I play with that setting, the Hex and RGB colour values detected by Photoshop don't change. 

For example, if I define the color #2c3741 and display it in Chrome, the resulting color is detected as #2d3741.  Both applications should be color managed identically.

What gives?  I can't count on Internet users making any changes to the color management on their computers, so I need a good way to preview colors in Photoshop so I know how to define color values that will appear more or less the same for most people.

sRGB IEC61966-2.1

[Sahil.Chawla]

Hi Christopher,

As you're experiencing a color rendering issue between Photoshop and Google chrome browser, I would recommend to try changing the monitor color profile to sRGB IEC61966-2.1 and see if it makes a difference.

Regards,
Sahil

[Christopher Liam Ivey]

The monitor profile already was sRGB 2.1.  That's irrelevant anyway, since I compared the output of both Photoshop and Chrome for the same hex value on the same display, and then compared the captured screenshots in Photoshop.

My thinking is that Chrome may not be executing on the standard in its rendering engine.  Only someone who  actually knows how the Blink rendering engine works would be able to answer that.

I'm wondering if there's some workaround - perhaps a profile that can be applied to the preview in Photoshop - that would allow me to select a color value in Photoshop, and derive a Hex or RGB value that would be rendered the same way in Chrome.

[Test Screen Name]

Are you on a wide gamut monitor?

What do you see for colour values in Chrome when you use a hex palette page like https://www.color-hex.com/  ? What it says or not?

[Test Screen Name · Accepted solution]

Looking at your numbers, the shift is 1/255. This is easily expected from calculation differences in CMMs.

[Christopher Liam Ivey]

I didn't know what a CMM was until I googled it, but the variations are small, and the direction of the variation seems to depend on the hue of the color. I imagine it's quite possible that Chrome and Photoshop use different CMMs for rendering. 

Is there an appropriate choice I can make in terms of the color preview settings to help me calculate color offsets?  I find these variations are largest with highly saturated values, but most noticeable with low saturation colors.

[Christopher Liam Ivey]

I see about the same rate of variation between the declared value, and the color value as read by Photoshop

[D Fosse]

Did the designer use a fully color managed setup, or did he/she work in Monitor RGB (without color management)? That's the question, and if no, that would explain it.

Hex is irrelevant here. It's just a different notation for RGB - both are just random numbers unless associated with a color space.

BTW, don't proof to Internet Standard. It's a hybrid setting that tells you precisely nothing useful. If you need to compare to a non-color managed application on the same system, proof to Monitor RGB. That temporarily disables color management in Photoshop.

[Christopher Liam Ivey]

You don't understand - the designer and I used the same color value in the same color profile, and found it rendered differently between the browser and Photoshop. We set the color value in Photoshop in sRGB IEC61966-2.1; input the value into a web layout - on the same computer, and rendered it in Chrome (supposedly in sRGB IEC61966-2.1), then picked the color generated by the browser in Photoshop - finding that it had shifted. 

I'm seeing color shifts on the same computer between 2 applications in the same color space, using the exact same color values.

"Hex is irrelevant here. It's just a different notation for RGB - both are just random numbers unless associated with a color space."

It was associated with the same color space.

So the issue isn't with the proofing, but with the fact that different apps which are supposed to be in the same color space are rendering different colors.

What I'm hoping is that there might be a proofing set-up that would allow me to compensate for this slight color divergence. 

[D Fosse]

OK, but the monitor profile isn't irrelevant if you measure by screenshots. Except if the monitor profile is identical to the document profile - that's known as a "null transform", canceling out the color management chain. In other words that turns color management off entirely.

In any case I've never used Chrome and don't know its color management implementation.

Try Firefox, but remember to set it to color management mode 1. This assigns sRGB to all untagged elements.

[Christopher Liam Ivey]

Yup.  That's what I said.  The monitor profile was the same as the document profile in Photoshop.  I set a color in Photoshop, rendered it in the browser, then got a different color back.

I don't know what you mean by untagged elements.

This is frustrating because I thought I was being clear in describing the problem, which is that I can't figure out how to pick a color in Photoshop, and then use CSS to render that same color in a browser.  I don't know how to figure out a correct offset to account for the difference in the way Photoshop and Chrome render the same color code (say, #001265).  This is happeing when I set the same profile for each.  The problem is most noticeable with dark, low-saturation colors.

The problem may simply be insoluble, but it's frustrating.  Especially since the new fashion in web UI is dark, low saturation blues.

[Test Screen Name]

" The monitor profile was the same as the document profile in Photoshop. " Don't do that! Goodness knows what will happen. Please use sRGB and report your results.

[Christopher Liam Ivey]

By that I meant that I was working in the sRGB  color space (as I wrote above), which is the default color space for Windows applications and monitors, (unless you plug in a specific ICM profile.  I wanted to produce something that would be as close as possible to what the average user would see with a default set-up. 

There's already a lot of variation between displays, but I wanted to at least get consistent results on my own computer first. I think that there's just a variation between the way these applications render color.  The shift isn't big - just annoying. 

[Test Screen Name]

So you mean you are using sRGB as your monitor profile? Please don't do that either! Use the correct monitor profile.

[Christopher Liam Ivey]

I should have been more explicit. Naturally, I've tested with the ICM supplied by the manufacturer, and I generally leave that in place. I also tried setting everything to sRGB to see if that changed what was happening.

Changing the monitor profile changes the apparent hue of all applications, but doesn't seem to impact the change in color rendering between Photoshop and Chrome.

I'm starting to think that perfect color consistency is not possible, but maybe my methodology is wrong.

I'm trying to select colors for web design by setting the document color space to sRGB, setting the proof mode to Internet Standard sRGB and then selecting colors from there.  I have also tried monitor sRGB.  When I plug those color values into an HTML document, they come out looking different - seemingly regardless of what ICM I apply to the monitor.

So now I'm a little confused, and starting to doubt that I can accurately reproduce Photoshop designs in CSS.

I didn't have this problem when working directly with our developers for desktop applications built in C++.

[D Fosse]

Let's break this down, irrespective of what you "should" or "shouldn't" do.

If you use sRGB as document profile (and that profile is embedded), and you also use sRGB as your monitor profile - then that means very simply that all color management in Photoshop is disabled. You have taken it completely out of the equation. The original RGB values go straight through to the monitor, unchanged. That's the definition of no color management.

But the color coming out of a certain set of sRGB numbers has to come from somewhere. Remember, if we associate those numbers with a specific color space, then we have a color definition. And this is defined by the Profile Connection Space used, either Lab or XYZ. That's where the numbers originate.

It could well be that there is a one-value difference between different applications' color management implementations. I don't know, but it's not impossible.

I would try to gather more data points by testing different browsers. Firefox is the first one I'd try.

[Christopher Liam Ivey]

Thanks very much.  I am investigating with other browsers. 

[D Fosse]

Actually what I just wrote doesn't make any sense.

Either there is color management, or there isn't. And if there isnt, the PCS used in sRGB is as irrelevant as sRGB itself. Strike that whole paragraph.

And further, with the same profile for document and monitor there can be no color management in Photoshop.

So either you're measuring apples vs oranges, or that trick for disabling color management doesn't work in chrome, because it's not using profiles in the correct way. So how, exactly, are you measuring those numbers from each application?

[Per Berntsen]

I don't think there's anything wrong with color management in Chrome – as far as I can tell, it's working perfectly.

Chrome's and Opera's color management work the same way as Firefox with Color management mode set to 1, assigning sRGB to untagged elements.

[D Fosse]

That's what I thought, I just don't have it here for testing.

I think this is a procedural mismatch, not actually measuring the same thing. Numbers are numbers, and without color management there's nothing to change them. They should just go right through.

[Peaceful_intelligence0D45]

I came across the same problem today. Chrome was making bright colors look bit muddy. Not a big difference but still noticeable. Then I checked the same page in FF and IE and it looked just fine. Turns out there's a Chrome color profile problem in the latest versions that can be fixed this way https://www.faqforge.com/windows/fixed-google-chrome-wrong-color-after-update/

My problem might be different than yours I thought I should still share it might be relevant to some others

[D Fosse]

The "fix" in that link just replaces the proper monitor profile with sRGB, which is not a fix at all. It's just a temporary workaround to bypass a broken monitor profile. The profile is still broken.

This is most likely a defective profile from the manufacturer, distributed through Windows Update. That happens a lot. Defective profiles may well affect different color managed applications differently. It may work in one, but throw another off. Monitor profiles are much more complex than people think.

The monitor profile needs to be a description of the monitor's actual and current response. It's a map, and it needs to correspond to the terrain. sRGB is not that, it's just a generic profile that usually is close enough for most people to not object too much.

All of which is why people buy and use calibrators. It's the only way to have full control of the monitor profile.