Warning, always convert your colors to from sRGB to Linear RGB before doing any math on them, then convert them back to sRGB afterwards for displaying them.
sRGB is the familiar color space you all know and love, it's what your display uses, and it's what has those RGB numbers between 0 and 255. But it's not a linear color space.
First think of values as being between 0 and 1 instead of 0 and 255. To change sRGB to Linear, do X^2.2 (close to squaring the value). To change Linear back to sRGB, do X^(1/2.2) (close to a square root).
In Linear RGB, a value of 0.5 is halfway between black and white. You can put a stripe or checkerboard pattern next to the color value, and it will appear to be the same brightness. But in sRGB, a value of 0.5 is much darker. Linear RGB of 0.5 is roughly equivalent to sRGB of 0.73.
The actual method of conversion involves a complicated curve that isn't continuous, using X^2.2 is still an approximation.
For blending, linear RGB is a much better choice than HSL. In HSL, a slightly cool gray (230°, 5%, 50%) mixed with an intense warm yellow (40°, 100%, 50%) might create a hot pink (315°, 52.5%, 50%). Not what your eyes expect.
When I was trying to find how close colors are to each other (such as when mapping an image to an existing palette), comparing color distance in YCbCr worked far better than comparing color distance in RGB.
Basically, anyone that paints knows that the more colours are mixed, the more they tend to brown. Yet because of that misunderstanding in the 1960s in Caltech, in CS more colors = white.
Crazy stuff. A great example of technical debt in systems design where we have all this jazz like sRGB, HSL, HSV, etc, trying to reset that basic mistake in physics from 60 years ago.
it's complicated for appropriate values of complicated.
more specifically it's defined piecewise and the standard then rounds some constants in the definition, which results in a slight discontinuity around the transition from one piece to the other.
>First, the average pixel is not what I would expect it to be at all
It looks like the averaging was done in default sRGB color space, with:
magick "$f" -resize 1x1 txt:-
Downscaling should instead be done in a linear colorspace. Human vision is non-linear, but the filtering required for downscaling is equivalent to blurring, which is linear because it's done optically not within the retina or brain. Using ImageMagick:
Additionally, JPEG supports chroma subsampling, which is usually enabled by default. I don't know what sips does, but with these small files you might as well use PNG and avoid the risk of losing color information this way.
This should produce results closer to human perception.
The average pixel doesn't look correct because human vision does not interepret shadowed colors as different colors. We first guess at the shadows, and then do some kind of inverse mapping from the shaded color space to the illuminated one before we "perceive a color". This is why the black,blue/white,gold dress illusion exists.
I'm of the belief that fruit and vegetable packaging is often designed to hide defects, and to make it harder to visually discern how fresh the produce is (on top of not letting you touch it).
Some examples.
Red netting on oranges makes it hard to see imperfections on the skin. Green netting does the same for avocados. Costco sells corn in trays that are cling wrapped with a wrap that is unmistakably designed to hide the ends of the corn (the easiest way to discern if corn has gone bad). Other fruits, and veggies like melons, onions, and potatoes have similar netting with colors that seem to be carefully chosen to maximize visual clutter.
Why aren't all the nets the same color?
Costco sometimes sells pears in plastic trays with multiple creases that cause reflections that make it very difficult to see what the pears inside look like.
Supermarkets also sometimes play with the light around the vegetables. Some areas have so much red in the light that you better take the items to a different area to be able to see if they are yellow or orange.
Taking another look, I think you're right! Particularly since the first orange is pretty orange already. I think the first example would have been better served with a yellower, less ripe orange to highlight the difference and the pull in the redder, riper direction from the bag.
Colours are often very relative though. We usually don't see a single orange on a white background. I'm not sure that would be representitive of real oranges at the shopping mall.
Also that picture (both versions) are the brownish oranges i have ever seen in my life.
It makes sense that adding red adds red (in addition to the avocado sacks you mention, I think of lemons’ yellow bags, limes’ green bags, and the red packaging/shelf lining and pink-tinged light in the butcher’s case)—but those images really do look strangely exposed to me.
Did you do exercise any specific control over the phone’s camera?
I wonder if the ring light might use the sort of general-market LEDs that underperform specifically at illuminating saturated reds and oranges in this range… see for example
That's a good question, and I could easily see the camera settings (and the light) being a source of error here. Naively, I used the default iPhone camera with the same exposure for each one, then ended up manually removing some of the HDR settings from each one when they were showing up as way overexposed on my computer. Not exactly an advanced, scientific technique, and there was also a bright source of soft white light from the window next to the setup, which could have thrown off the automatic exposure.
Another comment mentioned it, but I wonder if the overall effect would be more visible with yellower baseline oranges (or, as you mention, pale lemons and limes). Really interesting about the LEDs underperforming as well!
Along those lines, one big thing I worried about when reading your article was whether the camera's auto-white-balancing might be throwing everything off. I'm not sure how it works on an iPhone, but I'd suspect that presence of the red bag might cause it to reduce the redness of the rest of the image. One easy solution might be to always have two oranges in each photo---one inside the bag, and one sitting on top.
This was my immediate thought when I saw the ring light. Very very likely a CRI of 90 or below, which doesn’t even weight much in red shades. Not uncommon to see 92 CRI with a R9 (red) score below 50% of sunlight or tungsten illumination.
This is one of those things I knew on some subconscious level but never really thought about until now. Of course the red mesh makes them look more orange - it's basically grocery store color grading. Honestly kinda love how simple the trick is. No fancy tech, no marketing wizardry - just "put red stuff over orange stuff, profit." Makes me wonder what other dumb little visual hacks are happening around me that I'm not noticing at all.
I think the lighting/camera work doesn't help here. The first photo of the orange...doesn't look orange. It's really dark. In the photo from the shop they look orange.
Readit News
sRGB is the familiar color space you all know and love, it's what your display uses, and it's what has those RGB numbers between 0 and 255. But it's not a linear color space.
First think of values as being between 0 and 1 instead of 0 and 255. To change sRGB to Linear, do X^2.2 (close to squaring the value). To change Linear back to sRGB, do X^(1/2.2) (close to a square root).
In Linear RGB, a value of 0.5 is halfway between black and white. You can put a stripe or checkerboard pattern next to the color value, and it will appear to be the same brightness. But in sRGB, a value of 0.5 is much darker. Linear RGB of 0.5 is roughly equivalent to sRGB of 0.73.
The actual method of conversion involves a complicated curve that isn't continuous, using X^2.2 is still an approximation.
HSL has the angle discontinuity which is really annoying to deal with and sometimes even impossible to work around.
CIELAB should be fine in theory, but it's not what people actually use on their screens, so I've had some problems with it in practice.
Basically, anyone that paints knows that the more colours are mixed, the more they tend to brown. Yet because of that misunderstanding in the 1960s in Caltech, in CS more colors = white.
Crazy stuff. A great example of technical debt in systems design where we have all this jazz like sRGB, HSL, HSV, etc, trying to reset that basic mistake in physics from 60 years ago.
Isn't continuous? Really? That seems surprising to me; tell me more.
more specifically it's defined piecewise and the standard then rounds some constants in the definition, which results in a slight discontinuity around the transition from one piece to the other.
https://en.wikipedia.org/wiki/SRGB#Deriving_the_transfer_fun...
It looks like the averaging was done in default sRGB color space, with:
magick "$f" -resize 1x1 txt:-
Downscaling should instead be done in a linear colorspace. Human vision is non-linear, but the filtering required for downscaling is equivalent to blurring, which is linear because it's done optically not within the retina or brain. Using ImageMagick:
magick "$f" -colorspace RGB -resize 1x1 -colorspace sRGB txt:-
Additionally, JPEG supports chroma subsampling, which is usually enabled by default. I don't know what sips does, but with these small files you might as well use PNG and avoid the risk of losing color information this way.
This should produce results closer to human perception.
The average pixel doesn't look correct because human vision does not interepret shadowed colors as different colors. We first guess at the shadows, and then do some kind of inverse mapping from the shaded color space to the illuminated one before we "perceive a color". This is why the black,blue/white,gold dress illusion exists.
Some examples.
Red netting on oranges makes it hard to see imperfections on the skin. Green netting does the same for avocados. Costco sells corn in trays that are cling wrapped with a wrap that is unmistakably designed to hide the ends of the corn (the easiest way to discern if corn has gone bad). Other fruits, and veggies like melons, onions, and potatoes have similar netting with colors that seem to be carefully chosen to maximize visual clutter.
Why aren't all the nets the same color?
Costco sometimes sells pears in plastic trays with multiple creases that cause reflections that make it very difficult to see what the pears inside look like.
The unbagged oranges are more appealing.
We know that other people will not be truthful, misleading even.
We subconsciously know that the bag is orange to manipulate us.
Could it look better because you know it's truthful?
Also that picture (both versions) are the brownish oranges i have ever seen in my life.
Did you do exercise any specific control over the phone’s camera?
I wonder if the ring light might use the sort of general-market LEDs that underperform specifically at illuminating saturated reds and oranges in this range… see for example
https://www.canada.ca/en/conservation-institute/services/con...
and
https://indiecinemaacademy.com/are-leds-ruining-your-project...
Another comment mentioned it, but I wonder if the overall effect would be more visible with yellower baseline oranges (or, as you mention, pale lemons and limes). Really interesting about the LEDs underperforming as well!
Maybe tomatoes are in boxes that make them look more red? Who knows. I am looking forward to the next super market visit.
If it's marketing, all of it. Movies as well.