Color codes changes during workflow?

[vetoes]

I have tried looking around the internet but haven't found any answer. I have noticed that I get diffrent colors when during my workflow while I assumed that I will always get same color code from I same color. I cant figure out where is a problem and how can I prevent this from happening.

I have tried to visit known website CSS trick and find a hex color code and color in question is blue 0000FF. However when I scan color with Colorsnapper2 on web and its screenshot in Preview app (Mac) i get 2046f6 code of blue color with and then I open same screenshot in Pixelmator Pro and color that is shown there is 3700ff.

What I'm missing, can someone help me here?

 

[Herbert123]

The key concept here is colour management. I opened your screenshot in PhotoLine, and it has no color profile assigned. The colours got transformed somewhere along the line, and when no colour profile is assigned and being kept track of from the very start, the end result is a crap shoot.

I took a screenshot with the built-in option in Firefox, and pasted in PhotoLine: the colours are correct. If no profile is assigned, assign the srgb profile. Then save. Then other apps know what to expect and how to interpret the colours.

And I would avoid apps like Colorsnapper. Not necessary and you are just wasting your money when most image editors have built-in colour pickers which will do the exact same thing. PhotoLine, Photoshop, and Affinity Photo will do that, for example, so an app like Colorsnapper is pretty much useless for most users. Not too sure about Pixelmator, though: last time I checked a few years ago its color picker did not support that.

PS Unless your screen is properly colour managed and calibrated (with hardware such as a Spider) anything colour related becomes unreliable. So first calibrate and colour manage your display.

 

[vetoes]

Thank you for taking your time to reply and for informing me about colour management, that explains a lot that was troubling me.

I'm building websites in CMS so I'm not most users, I have unusual needs. I don't do enough to be considered a designer but I need to do often things that designers would do. When clients give me design resources I don't notice any issues because I assume color profiles are assigned properly since the real designer is working on them. 😀

I have a problem when I need to identify color from client's old websites quickly, since a lot of clients are not technical they don't even know about color codes. I have bought Colorsnapper 2 that helps a lot and the best part is that it behaves like it's part of the system (app independent).

Do you know maybe about any solution for that? How can I quickly get accurate information about color? It's important that it can scan color from everywhere so it's not a browser extension.

 

[Herbert123]

What colour values does ColorSnapper detect when you click on the blue swatch on that CSS tricks web colour page?

It should read 0000FF. I am not using ColorSnapper, but PhotoLine to read that colour with the built-in colour picker.

Also, which OS version, browser, and browser version are you running? Older browsers may not be properly colour managed.

 

[vetoes]

I use the last version of macOS Catalina and the last version of Safari, Chrome and Firefox, everything is fully updated. Running older MBA 2017.

I can't get that blue color #0000FF / 0 0 255 no matter what software I use, Colorsnapper 2, Digital Color Meter or Pixelmator Pro.

If I use Colorsnapper 2 on that CSS tricks website I get 2046f6 / 32 70 246 in Safari and Chrome browser. In Firefox I get different results 3700ff / 55, 0, 255. I did have issues with Firefox color reproduction before, FF was always a bit weird with color.

Learning about colour management explains the difference in colors that I noticed before. When I account for that and set the same color profile Colorsnapper 2, Digital Color Meter and Pixelmator Pro picker shows the same colors.

Now I don't understand why I get different results with some colors when I use Colorsnapper2 on webpages. Maybe the screen on my old MBA 2017 might affect things, dunno.

I have sent mail to Colorsnapper2 developer, maybe he has some info about it.

 

[Herbert123]

Strange. I can't replicate the same behaviour here at home on my Windows machine, and I do not have access to a Mac which I use at work (Covid related we are now all working from home). I tested all browsers (Firefox, Chrome, Opera, Edge, excepting Safari, of course), and when I pick the colours via PhotoLine, the colour codes remain correct.

Of course, this is on a Windows 10 machine, with colour calibrated screens.

Please report back when/if the ColorSnapper dev gets back to you. I am no colour management specialist myself.

 

[vetoes]

Strange. I can't replicate the same behaviour here at home on my Windows machine, and I do not have access to a Mac which I use at work (Covid related we are now all working from home). I tested all browsers (Firefox, Chrome, Opera, Edge, excepting Safari, of course), and when I pick the colours via PhotoLine, the colour codes remain correct.

Of course, this is on a Windows 10 machine, with colour calibrated screens.

Please report back when/if the ColorSnapper dev gets back to you. I am no colour management specialist myself.

Dev in question didn't reported back but I have discovered looking online and asking on different webpages that default color profile on Mac is only good for everyday use. For professional use I needed to change color profile. Basically, ignorance was my issue not software. 😀

One comment was:
"Switch your colour profile to "Generic RGB Profile".

For those who don't know, the default "Color LCD" profile is calibrated for each type for Mac's built-in display, and really affects the true color. It's not meant for professional use. Use P3 profile and set the value on the meter to sRGB or Generic RGB."

Once I changed color profile and calibrated my screen I managed to have all software show same color code that is on webpage. Issue is that new color profile comes with ugly blue tint because it boost blue a lot.

I now believe that issue is with crappy old 1400x900 screen on my old 2017 MBA. I assume that if I had any newer Mac with Retina that change in color profile wouldn't have that blue tint and problem would be resolved.

 

[Ritsuka]

No, you don't have to switch your display color profile. That comment is utterly wrong. Switching to another color profile will lower your display color accuracy (unless it's a profile created by a calibration device you attached to your display).

Digital Color Meter has an option to show the color in some specific color profile. So if you need the color in sRGB profile, switch Digital Color Meter to that.

Firefox is crap. CSS color in Safari are assumed to be in the sRGB color page. Firefox assumes they are in the current screen color profile space, so Firefox will display inaccurate colours. The fact is so visible on a recent Mac with a P3 screen: all css colours in Firefox are visibly saturated. Anyway, don't use Firefox is you want color accuracy.

I don't know if Chrome is better…