Highlighted

color problem after an export for web

New Here ,
Nov 23, 2018

Copy link to clipboard

Copied

Hello to all

I have a problem that I can not solve for the moment. 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.

But here it is: when I export a jpg, the Hexadecimal / RGB code of my colors moves. Not much, to the eye It does not really see, but it's not the same code ...

I use the CC 2018 to date with the latest version, I made an export for the web and whatever I choose as an option (optimized or not, srgb or not, incorporate the profile or not ...), I can not not to have the color exactly the same.

I have an orange # F18825 (RGB: 241, 136, 37) and I end up with a # FF890D (RGB: 255, 137, 13) after a 100% JPG export

Would anyone have an idea?

Thank you in advance and good day !

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

color problem after an export for web

New Here ,
Nov 23, 2018

Copy link to clipboard

Copied

Hello to all

I have a problem that I can not solve for the moment. 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.

But here it is: when I export a jpg, the Hexadecimal / RGB code of my colors moves. Not much, to the eye It does not really see, but it's not the same code ...

I use the CC 2018 to date with the latest version, I made an export for the web and whatever I choose as an option (optimized or not, srgb or not, incorporate the profile or not ...), I can not not to have the color exactly the same.

I have an orange # F18825 (RGB: 241, 136, 37) and I end up with a # FF890D (RGB: 255, 137, 13) after a 100% JPG export

Would anyone have an idea?

Thank you in advance and good day !

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Nov 23, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Nov 23, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Nov 27, 2018

Copy link to clipboard

Copied

- I open a document
-I check that the workspace is in sRGB
-I check that the document profile is in sRGB
-I create a rectangle with a vector shape in orange # f18825
-
I export for the web in JPG with all options imaginable, or even without option at all and the color becomes # f28725

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

Hi

Where are you measuring the final f28725 ?  Is that with the exported jpeg re-opened in Photoshop or opened elsewhere?

Dave

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Nov 27, 2018

Copy link to clipboard

Copied

in photoshop

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Nov 27, 2018

Copy link to clipboard

Copied

with the exported jpeg re-opened in Photoshop

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Nov 23, 2018

Copy link to clipboard

Copied

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:

orange.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Nov 27, 2018

Copy link to clipboard

Copied

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…

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

You need to check your document profile again. It's Adobe RGB, not sRGB, in which case this is all perfectly expected and normal. The working space is irrelevant, check the actual document profile!

F18825 = 241,136,37

If you put those numbers into an Adobe RGB file and then convert to sRGB, you get FF890D, or 255, 137, 13.

These are the two number sets in your original post.

Then add a little jpeg compression, where the color component is much more aggressively compressed than the luminance component, those numbers are likely to shift a little bit. That's also perfectly normal for jpeg. In that case 241,136,37 can very easily shift to 242,135,37. That's just one value up for red and one down for green. The hex number for that is F28725 - the number from your last post.

In short - make sure your document is sRGB from the start, not Adobe RGB, and this won't happen. Except for the jpeg compression, which is just a good reason to avoid the jpeg format if you need exact numbers. Jpeg wasn't made for accuracy.

Here's the best way to keep track of your document profiles:

profile.png

Likes

1 Like

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Nov 27, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...