Inspiring

Answered

Color rendering issue between Photoshop and Google Chrome

Forum|Forum|7 years ago
October 3, 2018
6 replies
7716 views

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

color anomaly

This topic has been closed for replies.

Correct answer Test Screen Name

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

P

Peaceful_intelligence0D45

New Participant

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

Community Expert

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.

T

Test Screen Name

Brainiac

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

C

Christopher Liam IveyAuthor

Inspiring

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

Community Expert

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.

T

Test Screen Name

Brainiac

" 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.

C

Christopher Liam IveyAuthor

Inspiring

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.

D Fosse

Community Expert

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.

C

Christopher Liam IveyAuthor

Inspiring

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

Community Expert

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.

T

Test Screen Name

Brainiac

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?

T

Test Screen NameCorrect answer

Brainiac

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

C

Christopher Liam IveyAuthor

Inspiring

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.

Sahil.Chawla

Community Manager

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

C

Christopher Liam IveyAuthor

Inspiring

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded