Confusing colour behaviour in Foundation

[davehughes]

Scratching my head on this one…

I have a header partial in Foundation that uses Jack to style the whole thing. I am trying to match the background colour to the background of a logo so the edge can’t be seen. I know the sRGB value from the logo. When I add it into Jack under the ‘Jack-Background’ setting I get a different colour in Jack in the main window than in the little colour box in the info pane. To make sure I wasn’t mad, I used the Digital Colour Meter to check. This is with the cursor hovering on the swatch (these are the correct values)

And this is with the cursor hovering on the main Jack window

The wrong colours (i.e. the ones in the main Jack window) are replicated on publish and there are no other colour background set either in Jack or in any of the other stacks in the partial (e.g. the Foundation columns). I even removed all the content from Jack and I still see the same discrepancy. Same thing happens if I just do it in a Foundation column (i.e. I don’t think it is Jack)

I did think it might be down to using Adobe RGB as the colour space for the logo and (presumably) sRGB in Rapidweaver but the differences are too great for that. It also seems to happen for all colours other than Black and White.

Anyone got a clue what I am missing ?

[Rovertek (Rob D)]

Dave, is there any reason why you are using Adobe RGB in your logo? I’ve learned a long time ago that all color spaces should be converted to sRGB before placing images (graphics, photos) in web pages. This may very well be the source of your problem.

I use the same Digital Color Meter and never have this kind of discrepancies.

[PaulRussam]

Welcome to the world of the Apple colour picker … and it’s a rather unpleasant world I’m afraid
What’s happening is that your monitor has a colour profile set and the Apple colour picker samples the colour on the profiled screen NOT the colour of the underlying pixel in the image.
It’s not just Stacks/RW it’s every app you have installed, it’s why Adobe spent a bucket load to develop their own colour picker to use in their own apps.

[davehughes]

Thanks for the replies guys:

@Rovertek You are right and so I shifted the logo to sRGB. Slight change but still the same problem.

@PaulRussam I understand your point about how the colour picker works. The bit I can’t work out is why the colour picker is behaving that way when I am using it on two areas of colour right next to each other immediately after each other i.e. it should generate the same result - even if it is isn’t the right result. The monitor is a fully calibrated Eizo so whilst its possible that there is variation across the screen, it’s fairly unlikely to be significant

The hunt continues…

[isaiah (Isaiah Carew)]

@davehughes

The bit I can’t work out is why the colour picker is behaving that way

the devil is in the details:

• the type of image
• the type of color in the image
• if the image has a color profile embedded
• the type of color profile that is embedded
• whether your monitor supports the color profile
• the calibration settings of your monitor
• if the specific color is in-gamut for the monitor
• whether the browser (or web view) supports color profiles for that image type
• whether there was dithering added to the image
• whether the image is being transformed (usually scaled) by your video card
• whether the image is compressed
• platform
• hardware

you started with an sRGB image but just specifying RGB values will get you only a plain vanilla RGB color. the gamuts of those two color profiles overlap by something like 98% – but there are a few colors that don’t map directly.

but more than likely it’s just because the image was saved with a color profile. that means that (so long as the web browser supports it – chrome doesn’t support color profiles for jpeg) then the image colors will be adjusted so that they appear on the user’s monitor much the same way they did on the monitor of the person that saved that file.

but the color picker always just picks up the end-result – the color that you actually see on the screen. which is why if you display the color 128,128,128 in a web browser (depending on calibration settings) you won’t even color-pick that value.

i should also mention that all this stuff varies VASTLY between platforms – and even within a platform depending on hardware. did i mention that a bunch of iOS devices have something called “deep color” – yeah – that too. this stuff is complicated.

let’s just take one simple contrived example…

so let’s say the color in question is 128, 128, 128
the guy who saved the file had a monitor that is calibrated to +1, 0, 0
and you have a display that shifts things -2, +1, 0

then the color in a png in safari, so long as it was saved with an embedded profile will display as 128+1-2, 128+0+1, 128+0+0 = 127, 129, 128

but if you select the color 128, 128, 128 and then display it via your mac – it doesn’t have that profile from the other monitor, so it’s going to display with only the offsets of your monitor calibration: 126, 129, 128

even if you start and end of the same display things can still get strange. and even if you don’t embed color profiles things can still get strange – dithering, video card scaling, 8-bit depth smashing, … and probably a half dozen other things that i don’t know about. believe it or not, even though it seems like i have a lot of info about this in my head, i have only learned the minimum necessary to build mac apps. for a real expert on the subject i’d recommend following @marcedwards on twitter.

BTW: the apple color picker is pluggable (you can install more panes) – and i think there are a few out there that let you sample pre/post calibration.

but for my own purposes, i just know:

1. it is very difficult if not impossible to match an image color to a specified color in a CSS style. the exceptions to this are GIF and SVG which use raw 8-bit color, just like a web page.
2. sampling colors has so many strange behaviors that i always treat color pickers as approximates rather than an absolutes.

update: one more thing… i don’t currently know of any bugs in the color system for stacks – either in API specified colors, or the way it displays, exports, converts, or transforms images. but there have been bugs in the past – especially in the API. if you notice something that seems like it might be a bug let me know – but please please please know that you’re in for a serious interrogation about the details – because as i think i’ve made pretty clear – the details here make all the difference.

[davehughes]

Isaiah, thanks for the comprehensive reply. I’ve had lots of fun with monitors and colour spaces in making sure my photography workflow to printer works well so I’v wrested with some of the complexity you have so eloquently explained - including the limitations of the colour picker.

The bit I still can’t rationalise is why when selecting a colour in the stack detail (e.g. background to a column), the digital colour meter reads a different measure between the colour swatch in the stack info and the relevant coloured background in the view window. Logically, doing that should eliminate all of the possible reasons you list for differences (e…g its the same monitor, same colour profile.

On a blank project with a single column with a background colour the meter reads different between the right hand side (stack info) and main view. I can’t see a reason for that.

More of just an intriguing issue now - I got round matching the logo by cutting the logo onto a transparent background and just putting the png on top of the coloured background in the stack. A bit clunky but it works!

Cheers

Dave