Colours being shown differently throughout web browsers and image editing software

Question

In a web browser, this colour (#495D7A) looks like this:

But in Photoshop, that colour looks like this and the dropper tool detects it as #495D7B:

And when these colours are side by side.

I've put it down to a few things: - The image format that's being loaded on the web browser isn't the same as what I'm previewing in Photoshop.

• I'm using the wrong print colour setup/colour setup/proof setup?

• My monitors (same model and brand, both bought together) are using different colour profiles/settings.

Chrome detects the colour as 495D7A and in Photoshop the colour is being detected as 495D7B so I'm stuck here.

Answer 1

You should NOT embed a color profile in images for websites. They add size to the image, but don't add any useful information, so all you do is make your pages heavier. When you Save for Web and Devices from Photoshop, be sure to uncheck "Embed Color Profile." As a safety measure, keep "Convert to sRGB" checked (in case you're dealing with an image that's in some other color space and you forget to convert it).

If you are picking your colors from Photoshop that's fine, as long as you disable color management for RGB files. If it's not disabled, you can get the wrong color codes. So either disable or set the working space for RGB to Monitor RGB.

If you look at the following examples with a JPG vs PNG image, you'll see how browsers output color code. The top value is from Chrome and the bottom is from FireFox. As a source, they both use an uncompressed 24-bit PNG and an uncompressed JPG.

JPG

PNG

The values aren't too far off using the default settings. However, it's best if you make sure that you don't have checked "Embed color profile" for JPGs and you turned off "Convert to sRGB" when exporting via Save for Web from Photoshop.

The best way to get the right result is with PNGs vs JPGs.

Answer 2

tl;dr: Don't try to micro-manage colour in webdesign.

Every screen is different, every time you use that screen the lighting is different and even the same screen at the same moment may be seen differently by distinct users. Trying to colour manage in such a way that colours are exactly reproduced every time online is a waste of time and effort.

Yes, you can come pretty close by taking colour profiles into account, and you might even get to an exact reproduction of your Photoshop colour in your browser on your screen. Then, you show your prototype to your client, who will look at it either on a mobile device or a monitor that is, in 99.98% of cases, calibrated differently than your screen—if it is calibrated at all.

Add to that the fact that humans' lens slightly changes colour as they age, making them perceive colours to be more yellow the older they are. Add to that the fact that colour perception is changed depending on the intensity and colour of light that falls on the screen it is viewed with. Add to that the fact some screens may be dimmed or brightened because their user prefers it that way. All these factors thwart your efforts to colour manage.

Don't get me wrong, I'm not saying that you shouldn't colour manage and just choose something that's 'close enough'. Try and reproduce your colours accurately, but keep in mind that the Big Wide World™ will do its utmost to shake things up.

Considering that the deviations you are observing are in the order of magnitude of a single RGB unit on a 0 to 255 scale, they are, for all practical means and purposes, negligible. If colours would stray by 10 units or more, I'd start to be concerned. But, even if they are put up directly next to each other on a screen, the vast majority of viewers will not be able to discern between two colours that differ only one unit.

Save yourself the time and effort and just leave it.