How can I maintain the exact same colors when exporting a jpeg?

[defaultoiiey0nok5uh]

Hi,

I’m having an issue with Photoshop when I’m exporting jpegs from PSDs. 

I have several PSD files with paintings imposed digitally on a “wall” that I’ve created out of a layer using the color #f9f6f6. 

When I export the jpegs, I’m checking them in photoshop afterwards and I’m noticing that the color of the wall has changed to either #faf6f5 or #faf6f7. Not only are these colors different tones to the wall layer in my PSD files, they are slightly (but noticeably) different from each other as well - one looks a couple of shades more pink, which isn’t ideal when I’m trying to keep things consistent.

I’ve set the document profile in the bottom left corner to sRGB IEC61966-2.1 (8bpc) and when I export as a jpeg I’ve tried having “convert to sRGB” and “Embed color profile” both checked and unchecked, and it doesn’t make any difference.

Under the mode settings I have RGB color and 8-bit selected.

Is there any way I can prevent the colors from changing? I should probably mention that these jpegs are intended for web use.

[Test Screen Name]

You may have heard people describe JPEG as "lossy". Every time you save or open a JPEG it is changed, so JPEGs should never be edited more than once, as the damage gets worse and worse.

Why? Because JPEG is designed to make very small files; it does this by changing and compromising the exact colours. Yes, it deliberately changes the colours. No, it cannot be switched off. Only reduced by choosing the higher JPEG quality settings. You don't mention your JPEG quality settings at all, so it's possible you aren't bothering to set them at all and they may be low. But even at the highest quality, expect some change. The changes you mention are moving just one colour value, and are extremely close - do you need help understand what the numbers in a hex code mean?

[defaultoiiey0nok5uh]

Hi there, thanks so much for your quick reply! You're right, I forgot to mention the quality settings - I've been saving them at reasonably high quality, but some compression was needed given that they are for a website, so I saved them at 1200px width and set the quality so that the file size was around 350kb. 

As for understanding hex color codes, any advice you can give me would be much appreciated. Maybe there is a way of setting the color in the PSD file at a different code so that when I export the jpegs, the color ends up being closer to what I originally intended? 🤔

[D Fosse]

As Test Screen Name says - welcome to jpeg compression.

I did some testing, and you'll always get these small shifts. It will be easier to see what's going on if you look at the RGB numbers instead of hex. Hexadecimal is just base 16 notation instead of base 10 notation. They are the same numbers. You may get a red jump from 249 to 250, a blue jump from 246 to 245, and so on.

Jpeg compresses the color component more aggressively than the luminance component. So the color snaps into discrete "slots". In this case your original color is outside these slots. It's pretty unpredictable and if you need a perfect numerical match it may take a lot of trial and error.

The only way to get closer is to dial down the compression (increase quality). But make no mistake, there is no such thing as "full quality" jpeg - there's always compression, even at "max" quality (which is very far from max).

In Save For Web there is an "optimized" checkbox, which supposedly pushes color compression further. You could experiment a bit with that off and on, but I don't know how much effect it has.

[defaultoiiey0nok5uh]

Thank you, that's very helpful 🙂. I will have a play around in photoshop and see how close I can get it. 

[Test Screen Name]

"As for understanding hex color codes, any advice you can give me would be much appreciated. Maybe there is a way of setting the color in the PSD file at a different code so that when I export the jpegs, the color ends up being closer to what I originally intended?"

Let's try and explain. And then you agree with me that the colours actually couldn't be closer, unless they were actually the same. Before getting into detail: expect JPEG to change colours. Sometimes by sheer good luck, the colours will stay the same on some of the pixels in an image, but there are no "colours that don't change", the change to colours depends on all of the nearby colours, and the compression settings, and other things.

So, RGB colours are often given as three numbers between 0 and 255. (Sometimes they are given as numbers between 0.0 and 1.0... but this is just a simple scaling to fit).  And sometimes they are given as hex codes. The hex codes are just a short way of giving three numbers between 0 and 255.  There are three codes  - taking an easy one 020406 - split it up - 02 04 06 - this is RGB 2,4,6. It's confusing because these aren't decimal numbers but hexadecimal, made using the letters a,b,c,d,e,f (or A,B,C,D,E,F) as well as the numbers. Don't know what hexadecimal is? No problem, here's a nice table (decimal in black followed by hexadecimal in blue): 

So let's take your original colour #f9f6f6. This is f9,f6,f6 - and from the table 249,246,246. 

Now a changed colour #faf6f5. This is fa,f6,f5 - from the table 250,246,245.

So each colour has changed by only 1 at most. It could hardly be closer.

Is it detectable? Yes? Does it matter - no, not for a typical photo of the real world. That's what JPEG is for. For graphics, text etc. the lossy stuff can indeed ruin it... A block of solid exact colour will likely become a blur of different colours; but the real world doesn't offer blocks of solid exact colour.