5 ms·

I did something similar to this. I wanted "Lazy loaded" SVG images. Generating an average color over an area would render horrific results - an area with equal

by pippy 6y ago

I did something similar to this. I wanted "Lazy loaded" SVG images. Generating an average color over an area would render horrific results - an area with equal red green and blue would be gray for example. My solution was to convert a target pixel area into a histogram in HSL color space, select the most populated color area and take an average of that populated area. You could then do smart things like render edges along where the change reached a threshold so you got clean edges. Once you blurred the SVG it was a fraction the size of a down scaled raster image (using imagemagick). There's all kinds of very interesting pitfalls when dealing with color. RGB is great for transmitting data but horrible when applying operations. For example, your eye converts RGB in a way so that yellow essentially becomes a primary. Another is the eye perceives photons in a logarithmic fashion adding two colors and halving them doesn't make an average. This article has some great info in it: https://blog.asmartbear.com/color-wheels.html https://blog.asmartbear.com/color-wheels.html

deleted 6y ago
[deleted]
deleted 6y ago
[deleted]
dumpsterdiver 6y ago
> For example, your eye converts RGB in a way so that yellow essentially becomes a primary. Another is the eye perceives photons in a logarithmic fashion adding two colors and halving them doesn't make an average. Coming from an audio background where we have the fletcher-munson noise curve, I'm really curious to learn more about how the eye perceives light. Does anyone have other sources for this, please?
- dahart 6y ago
  Oh yeah there are tons of sources, whole books on color physiology and perception. Wikipedia really isn’t a bad place to start - see the cone response curves at the top of this section https://en.wikipedia.org/wiki/Color_vision#Physiology_of_color_perception https://en.wikipedia.org/wiki/Color_vision#Physiology_of_col... A somewhat similar idea to the Fletcher-Munson noise curve is the “just noticeable difference” https://en.wikipedia.org/wiki/Just-noticeable_difference https://en.wikipedia.org/wiki/Just-noticeable_difference which can be mapped across color differences https://en.wikipedia.org/wiki/Color_difference https://en.wikipedia.org/wiki/Color_difference to figure out how people perceive the brightness of a given color https://en.wikipedia.org/wiki/Brightness https://en.wikipedia.org/wiki/Brightness
  - dumpsterdiver 6y ago
    Interesting, thanks for the links! The color vision link had a nice chart outlining the infrared to ultraviolet chart with sensitivity ratings. Curious though, how serious of an impact would time of day have on this curve? If someone took the test in the early morning, would yellow be more striking/harsh than if they viewed it at night? Would blue be more striking after a day of saturated sunlight? Edit: Blue and yellow are similarly placed on the chart, apparently accounting for the morning/night sensitivity
    - dahart 6y ago
      I’m totally speculating about this before googling anything, but I suspect that time of day alone is not a huge factor, other than right after waking you’ll have more blood in your eyes and everything’s reddish for a few minutes, but it goes away quickly. Illuminant is a big factor in appearance, so time of day matters a lot in the sense that if the sun is the primary illuminant, it changes color based on the angle in the sky and atmospheric conditions. It’s an interesting question, and hard to answer due to perception and adaptation - our system is really good at compensating for things like illuminant and brightness and “color surround” (background colors). We adapt pretty fast to changes in condition (think about how long it took ... before Covid ... to adapt after walking out of a midday movie in a theater), and we’re better at seeing relative color differentials than absolute colors, so the physiological perception of blue isn’t likely to change after a day of sunlight (I guess). But just the memory of the day’s colors or yesterday’s color might affect what you think you see...
      - deleted 6y ago
        [deleted]
- smegcicle 6y ago
  Looking up Lab* color could be a good start, if you're unfamiliar- color being naturally three dimensional (eg RxGxB), LAB is a projection of color where L attempts to account for every color of a perceived lightness, and A and B account for another two dimensions (green-to-red and blue-to-yellow... you can read the wp page as well as I can). The goal being that a given distance in any direction anywhere in the volume have an equal perceptual difference to the eye, an aspect sorely missing from RGB (where eg 8bits/channel is overkill in some colors but can result in banding in others, as well as being cumbersome to process in, as GP mentioned) https://en.wikipedia.org/wiki/CIELAB_color_space https://en.wikipedia.org/wiki/CIELAB_color_space https://en.wikipedia.org/wiki/Colour_banding https://en.wikipedia.org/wiki/Colour_banding
  - deleted 6y ago
    [deleted]
  - dumpsterdiver 6y ago
    Phew, thank you for the links. My brain is spent on colors for the night!
- Leszek 6y ago
  This video from Captain Disillusion does a great job of explaining both the biological mechanism and the consequences it has on displays: https://youtu.be/FTKP0Y9MVus https://youtu.be/FTKP0Y9MVus
dumpsterdiver 6y ago
Just for clarification, are you saying that the eye translates visual data differently if the image were displayed in RGB, as opposed to HSL? Edit: Is the visual result not summed by the brain, no matter how it is displayed? Whether displaying RBG or HSL, the brain will interpret that in a way that its API can comprehend, yes?
- jcranmer 6y ago
  That's not what he's saying. What he's saying is that if you do math in RGB space, it doesn't work out as you expect. So the simplest example of math is taking the average of two colors. If you plot two colors in RGB space and take the midpoint of the line connecting, the resulting color tends not to look anything like "halfway" between the two colors. If you instead did the process in HSL, the result makes more sense.
  - deleted 6y ago
    [deleted]
  - deleted 6y ago
    [deleted]
ksaj 6y ago
Light, and therefore color, is a wave when it comes to how we sense it. Like sound, if you take to frequencies and add them together, you don't get an average. You get a more complex wave that produces a complex sound (a chord) somewhat akin to a secondary or tertiary color.
- thaumasiotes 6y ago
  If you're talking about how we sense light, it's more of a vector of 3-4 scalar values. You have activation levels for your rods and each of your cones. Light is physically a wave, but that's not especially relevant to how you sense it.
steerablesafe 6y ago
> Generating an average color over an area would render horrific results - an area with equal red green and blue would be gray for example. To be fair it sounds like you did the averaging in sRGB instead of a linear colorspace.
- mark-r 6y ago
  If the RGB colors are equal it doesn't matter if you use a linear or non-linear color space, the color will always be gray. The brightness might be different but I'm not even sure that's true.
labawi 6y ago
> .. eye perceives photons in a logarithmic fashion adding two colors and halving them doesn't make an average. Are you using linear values or the usual funky gamma space¹? With linear values, value 1 means x photons and value n means n·x photons. Always. You can resize, blur etc. and you get the expected results as if squinting, looking from a different distance etc. Works fine in RGB. However, with linear color you need to cover a lot of range for decent results, so instead of using linear 16+ bits per color channel, floats or ugly 8 bits, people unevenly squished them together, making a nice representative range of intensities in 5-6 or 8 bits, which we call "gamma space". Memory was very expensive and this way colors were nice. We have been using 8-bit colors (24bit RGB, 8bit grayscale) for so long that most people don't realize the difference between linear and "gamma" space values (I didn't for a long time). They say colors are weird and merrily average a couple of gamma values, because it kind-of gets the job done and no one's got time for this. It doesn't matter if your pictures get darker and off-color each time you resize them in your typical program. Working with colors properly would take more time and/or memory, so it's not really welcome everywhere and compatibility is a big issue. Even many artistic effects depend on these effects of gamma space "calculation". Instead, we add all sorts of workarounds, e.g. font darkening and lightening, because antialiased fonts are a fraction of a pixel thinner when dark, but thicker when white, when the AA "averaging" is in gamma space. ¹ Gamma space is a properly defined transformation, but you should really treat gamma-space values as palette color.
- pippy 6y ago
  There's a great article that explains how to use math to address the issue you metion: https://www.picturecorrect.com/tips/photoshop-computes-color-incorrectly-but-theres-an-easy-fix/ https://www.picturecorrect.com/tips/photoshop-computes-color... Thankfully using interpreted languages has the added benefit of usually handling numbers better, so converting between color spaces is pretty painless. Professionally I've handled things more conservatively. Monitors with deep color support are only now being more popular. Most server side tech seems support traditional color depth best. Now is the time to start thinking about deeper color images on by default, webp is great, and support has only recently became mainstream on iOS14.

by pippy 6y ago

deleted 6y ago

[deleted]

deleted 6y ago

[deleted]

dumpsterdiver 6y ago

> For example, your eye converts RGB in a way so that yellow essentially becomes a primary. Another is the eye perceives photons in a logarithmic fashion adding two colors and halving them doesn't make an average. Coming from an audio background where we have the fletcher-munson noise curve, I'm really curious to learn more about how the eye perceives light. Does anyone have other sources for this, please?

dahart 6y ago
Oh yeah there are tons of sources, whole books on color physiology and perception. Wikipedia really isn’t a bad place to start - see the cone response curves at the top of this section https://en.wikipedia.org/wiki/Color_vision#Physiology_of_color_perception https://en.wikipedia.org/wiki/Color_vision#Physiology_of_col... A somewhat similar idea to the Fletcher-Munson noise curve is the “just noticeable difference” https://en.wikipedia.org/wiki/Just-noticeable_difference https://en.wikipedia.org/wiki/Just-noticeable_difference which can be mapped across color differences https://en.wikipedia.org/wiki/Color_difference https://en.wikipedia.org/wiki/Color_difference to figure out how people perceive the brightness of a given color https://en.wikipedia.org/wiki/Brightness https://en.wikipedia.org/wiki/Brightness
- dumpsterdiver 6y ago
  Interesting, thanks for the links! The color vision link had a nice chart outlining the infrared to ultraviolet chart with sensitivity ratings. Curious though, how serious of an impact would time of day have on this curve? If someone took the test in the early morning, would yellow be more striking/harsh than if they viewed it at night? Would blue be more striking after a day of saturated sunlight? Edit: Blue and yellow are similarly placed on the chart, apparently accounting for the morning/night sensitivity
  - dahart 6y ago
    I’m totally speculating about this before googling anything, but I suspect that time of day alone is not a huge factor, other than right after waking you’ll have more blood in your eyes and everything’s reddish for a few minutes, but it goes away quickly. Illuminant is a big factor in appearance, so time of day matters a lot in the sense that if the sun is the primary illuminant, it changes color based on the angle in the sky and atmospheric conditions. It’s an interesting question, and hard to answer due to perception and adaptation - our system is really good at compensating for things like illuminant and brightness and “color surround” (background colors). We adapt pretty fast to changes in condition (think about how long it took ... before Covid ... to adapt after walking out of a midday movie in a theater), and we’re better at seeing relative color differentials than absolute colors, so the physiological perception of blue isn’t likely to change after a day of sunlight (I guess). But just the memory of the day’s colors or yesterday’s color might affect what you think you see...
    - deleted 6y ago
      [deleted]
smegcicle 6y ago
Looking up Lab* color could be a good start, if you're unfamiliar- color being naturally three dimensional (eg RxGxB), LAB is a projection of color where L attempts to account for every color of a perceived lightness, and A and B account for another two dimensions (green-to-red and blue-to-yellow... you can read the wp page as well as I can). The goal being that a given distance in any direction anywhere in the volume have an equal perceptual difference to the eye, an aspect sorely missing from RGB (where eg 8bits/channel is overkill in some colors but can result in banding in others, as well as being cumbersome to process in, as GP mentioned) https://en.wikipedia.org/wiki/CIELAB_color_space https://en.wikipedia.org/wiki/CIELAB_color_space https://en.wikipedia.org/wiki/Colour_banding https://en.wikipedia.org/wiki/Colour_banding
- deleted 6y ago
  [deleted]
- dumpsterdiver 6y ago
  Phew, thank you for the links. My brain is spent on colors for the night!
Leszek 6y ago
This video from Captain Disillusion does a great job of explaining both the biological mechanism and the consequences it has on displays: https://youtu.be/FTKP0Y9MVus https://youtu.be/FTKP0Y9MVus

dumpsterdiver 6y ago

Just for clarification, are you saying that the eye translates visual data differently if the image were displayed in RGB, as opposed to HSL? Edit: Is the visual result not summed by the brain, no matter how it is displayed? Whether displaying RBG or HSL, the brain will interpret that in a way that its API can comprehend, yes?

jcranmer 6y ago
That's not what he's saying. What he's saying is that if you do math in RGB space, it doesn't work out as you expect. So the simplest example of math is taking the average of two colors. If you plot two colors in RGB space and take the midpoint of the line connecting, the resulting color tends not to look anything like "halfway" between the two colors. If you instead did the process in HSL, the result makes more sense.
- deleted 6y ago
  [deleted]
- deleted 6y ago
  [deleted]

ksaj 6y ago

Light, and therefore color, is a wave when it comes to how we sense it. Like sound, if you take to frequencies and add them together, you don't get an average. You get a more complex wave that produces a complex sound (a chord) somewhat akin to a secondary or tertiary color.

thaumasiotes 6y ago
If you're talking about how we sense light, it's more of a vector of 3-4 scalar values. You have activation levels for your rods and each of your cones. Light is physically a wave, but that's not especially relevant to how you sense it.

steerablesafe 6y ago

> Generating an average color over an area would render horrific results - an area with equal red green and blue would be gray for example. To be fair it sounds like you did the averaging in sRGB instead of a linear colorspace.

mark-r 6y ago
If the RGB colors are equal it doesn't matter if you use a linear or non-linear color space, the color will always be gray. The brightness might be different but I'm not even sure that's true.

labawi 6y ago

> .. eye perceives photons in a logarithmic fashion adding two colors and halving them doesn't make an average. Are you using linear values or the usual funky gamma space¹? With linear values, value 1 means x photons and value n means n·x photons. Always. You can resize, blur etc. and you get the expected results as if squinting, looking from a different distance etc. Works fine in RGB. However, with linear color you need to cover a lot of range for decent results, so instead of using linear 16+ bits per color channel, floats or ugly 8 bits, people unevenly squished them together, making a nice representative range of intensities in 5-6 or 8 bits, which we call "gamma space". Memory was very expensive and this way colors were nice. We have been using 8-bit colors (24bit RGB, 8bit grayscale) for so long that most people don't realize the difference between linear and "gamma" space values (I didn't for a long time). They say colors are weird and merrily average a couple of gamma values, because it kind-of gets the job done and no one's got time for this. It doesn't matter if your pictures get darker and off-color each time you resize them in your typical program. Working with colors properly would take more time and/or memory, so it's not really welcome everywhere and compatibility is a big issue. Even many artistic effects depend on these effects of gamma space "calculation". Instead, we add all sorts of workarounds, e.g. font darkening and lightening, because antialiased fonts are a fraction of a pixel thinner when dark, but thicker when white, when the AA "averaging" is in gamma space. ¹ Gamma space is a properly defined transformation, but you should really treat gamma-space values as palette color.

pippy 6y ago
There's a great article that explains how to use math to address the issue you metion: https://www.picturecorrect.com/tips/photoshop-computes-color-incorrectly-but-theres-an-easy-fix/ https://www.picturecorrect.com/tips/photoshop-computes-color... Thankfully using interpreted languages has the added benefit of usually handling numbers better, so converting between color spaces is pretty painless. Professionally I've handled things more conservatively. Monitors with deep color support are only now being more popular. Most server side tech seems support traditional color depth best. Now is the time to start thinking about deeper color images on by default, webp is great, and support has only recently became mainstream on iOS14.