3

In a web browser, this colour (#495D7A) looks like this: enter image description here

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

enter image description here

And when these colours are side by side. enter image description here

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.

  • Now as crazy as this sounds, but when I posted this question the colours now all look the same (because they're all in the web browser) so my new question is what am I doing wrong to create this problem? Do I have the wrong colour setup on Photoshop or am I missing something else? – Brandito Jan 23 '18 at 5:29
  • 3
    Browsers assume sRGB.Is your working space sRGB? – joojaa Jan 23 '18 at 6:13
  • 1
    @joojaa The default colour mode when creating a new document is usually RGB Color (8bit) although I think I just noticed that I was on Working CMYK... I'll check if this was the issue tomorrow but if you'd like to put it into an answer I'll be ready to accept it if it is the solution/problem. – Brandito Jan 23 '18 at 6:27
2

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

enter image description here

PNG

enter image description here

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.

  • Never set your working space to your monitor profile. That's done as it's sent to the screen, automatically. Set your working space to your working space i.e., your input space if you're a photographer, e.g. Nikon Abobe98, or most commonly-used space as a graphics designer e.g. sRGB. Only convert at actual export, never before. Your colour examples, btw, are not consistent & quite a way from the claimed values; the OP's are exactly right. – Tetsujin Feb 25 '18 at 15:25
  • sorry, no, the OP's register one out, all 3 are #495D7B. My bad. – Tetsujin Feb 25 '18 at 15:35
0

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.

  • 1
    I appreciate the detailed explanations and all the effort put into this answer although I believe his answer states it more clear that I hadn't had my colour profile set to internet standard sRGB, I upvoted your answer regardless because it enlightened me on a few other issues I'd been facing. – Brandito Jan 23 '18 at 22:51
  • I'm a full stack web developer/designer by trade so I'm aware of all the colour differentiation on different screens (Viewing a website I've designed in a Samsung S6 Edge, iPhone 4, iPhone 6 and a HTC shows completely different colours on each (': ) I also work at a place that works with PMS print colours where matching the colours is very important. – Brandito Jan 23 '18 at 22:52
  • I was more just wondering as to why they were so visibly different on the same screen. – Brandito Jan 24 '18 at 4:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.