color problem after an export for web

Thank you all for your responses

I honestly can't see this as something to be concerned about. If you need accuracy, you just don't use jpeg. The jpeg format has so many problems that this one becomes insignificant.

You only use jpeg for one thing: reduce file size when the price for that size reduction is a worthwhile tradeoff.

I did the same test in other image editors for comparison, and the same result: jpg's lossy compression indeed shifts the colour values a tiny bit, even at higher quality compression settings.

Interestingly enough this also occurs when saving as lossy webp, but non-lossy webp retains the exact colour values.

When I tried lossy JPG 2000 and JPG XR surprisingly enough the colour did NOT shift (aside from artefacting areas alongside the box's sharp edge). Seems those two algorithms are more colour 'correct' in their compression.

That said, below a certain compression quality the colour did shift. At 60% it was still fine in JPG XR, at 50% the colours shifted.

PS neither JPG 2000 nor JPG XR are web compatible.

I have a web page to do for which I have to respect the graphic chart of a logo with 2 precise colors. So far no worries.

Also on the compression color effect, with a uniform color fill, you'll see the same shift with any quality setting.

So that's the reason to use PNG when there are a limited number of colors. You'll get color accuracy, and a smaller file size. With 2 colors you can save as PNG-8 and get the best compression. Here's PNG-8 vs. high and low quality JPEG at 200x200 px:

Well, all I can say is that the numbers are a perfect match for an Adobe RGB > sRGB conversion. That's not coincidence; that doesn't happen randomly. That's like the chimpanzee writing Shakespeare by randomly hitting keys

The most obvious explanation is usually the correct one.

I advanced my research by passing everything in sRGB and the result of my color with a JPG export is always different.
I am very precise in the color code because it falls within the framework of a graphic charter. Otherwise, visually, we do not see the difference unless we sample with the pipette.
A colleague has the same results as me, and he also tried with Affinity for the same conclusion: the JPG export alters the color, while the PNG is respectful of the original color.

I draw a solid color of # f18825

I export for the web in PNG: I find the same color # f18825

I export for the web in JPG: my color turns into # f28725
It does not matter if I incorporate the color profile, I use the profile of the document or if I uncheck everything: I can not get the color # f18825

First of all thank you very much for your answers and the time you use to try to find a solution to my problem.

I work for a web document.
I have a workspace in sRGB.
The color profile is in sRGB.

I draw a solid color of # f18825

I export for the web in PNG: I find the same color # f18825

I export for the web in JPG: my color turns into # f28725
It does not matter if I incorporate the color profile, I use the profile of the document or if I uncheck everything: I can not get the color # f18825

I still do not understand…

Well, in this case it's very simple.

The first set of numbers is an orange color in Adobe RGB.

The second set is the same color converted to sRGB.

That's slightly out of gamut for sRGB, hence the 255 red. But you can barely see it on a wide gamut monitor. On a standard gamut monitor you can't see it because it's all clipped to sRGB anyway.

While the mathematics of color management is truly complicated, in use it's fairly simple and it basically works out of the box. There's only a couple of basic precautions to observe. One of them is to always work in sRGB for web or screen.

This is the correct color: sRGB 241-136-37, or hex f18825:

Color-management is a complex subject that defies a simple answer or "set it and forget it" operation.  Dave has done a very good job above with an overview.

The subject, with some effort, is navigable and learning what everything means and how it works can benefit you from now on.  However, there is much misinformation.  The thing to keep in mind is that every setting is there for a reason, and you're expected to set them all so that when you're working, Photoshop is helping you as best it can to keep things straight.

My first questions to you, integrationi41501282​​, are:

What color-profile describes the colors of your document (i.e., what is your working space)?  And why have you chosen this working space?

If you don't quite know how to answer, can you please describe how you get to where you're editing an image (e.g., do you open a raw file, File > New and draw shapes, or what)?  We can work into it step by step.

-Noel

Hi

Hex codes are just hexadecimal numbers (i.e. base 16) representing Red, Green and Blue values. so instead of 0 through to 255 we write 00 through to FF

However those numbers are utterly meaningless without the context of an associated color space such as sRGB, Adobe RGB, Pro Photo.....etc

The same color will be represented by different numbers in each of those colour spaces.
Conversley, the same numbers in those three color spaces will represent different colours.

So where does that leave you - the only way you will retain the Hex number is to set it in a specific color space for your document (and Hex numbers in general refer to sRGB if they do not specify otherwise, so the document should be in sRGB color space) . Then on export you need to embed the sRGB color profile by ticking the "embed profile" in the export options.  If at any stage the document is converted to another color space then the numbers representing a specific colour will (and must) change.

Dave