4 ms·

The gradient mixing example is broken. "Color gradients are supposed to be equally bright around the midpoint" This is false. Nobody mandates this. There is

by fsloth 5y ago

The gradient mixing example is broken. "Color gradients are supposed to be equally bright around the midpoint" This is false. Nobody mandates this. There is no "correct" way to do it, every one of them is arbitrary (although some do look better than others and the suggested method is better than the default linear interpolation). It is completely analogous to smoothing curve in animation - it's about what sort of interpolation mechanism you use. If there would be a standard for specific perceptually pleasing gradient, then one could claim "does not follow standard X". The point of the article is usually abslutely correct, though: "The correct way to process sRGB data is to convert it to linear RGB values first, then process it, then convert it back to sRGB if required."

barbegal 5y ago
Whilst it is true there is no "correct" gradient, the author is making the reasonable assumption that the gradient can be simulated by two linear light sources (A and B) being shone onto a perfectly reflective (white) surface. Each light at full brightness is one end of the gradient. To calculate a colour at x% along the gradient you turn light A on to (100-x)% and B on at x%. The issue with this is that the human eye perceives brightness slightly differently at different frequencies (and combinations of frequencies) so the perceived brightness of the gradient may appear non linear. That isn't to say that the browser generated gradient is perceived in this way, it is generally even more non linear in its perceived brightness.
- fsloth 5y ago
  Gradients are design tools. The gradient interpolation function can be designed around some physical mixing hypothesis but there is no first principles rule as such. Focusing on the luminosity is only half of the battle. For nice looking gradients that are pleasing to design with, generally for aesthetic reasons you also want the perceived color saturation to be interpolated in a predictable way. For reference, here is a nice example of an approach to find a nice looking mixing function: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
- barbegal 5y ago
  As an addendum a good way to visualize gradients of equal perceived brightness is to use an Hue Chroma Luminance (perceived brightness) picker like http://tristen.ca/hcl-picker/ http://tristen.ca/hcl-picker/ As you can see, preserving luminance means you get a restricted range of gradients to choose from.
  - planede 5y ago
    Linear interpolation in the HCL space is not equivalent to linear interpolation in a linear colorspace. For example in a linear colorspace if the interpolation goes from saturated blue to saturated yellow, then the the interpolation goes through gray, while in the HCL space the interpolation goes through more or less saturated colors. The possible colors produced by a display remain a cube in a linear colorspace, which is a convex object, so all gradients remain available.
Certhas 5y ago
Well... color is physics though. Three spectra that our eye are sensitive to span a vector space dual to the space of all light spectra [1]. That space naturally has a linear structure. You can have twice as much light of one color or the other, and you can add the light of different colors. So there _is_ a natural interpretation of linear interpolation between two colors in physics. Concretely: Imagine two lamps with the two colors and the same brightness. You start with one fully turned up and the other fully turned down. Then you increase the one while you turn down the other keeping the brightness constant.
- fsloth 5y ago
  IMO gradients are not based on physics any more than selecting a smoothing curve in animation is. They are design tools - even though physics can be used to analyze them. I say this as a software engineer with a MSc in physics and a computer graphics/traditional graphics afficinado :) - not to boast with my eminence as that would be silly on this site but just that I've given a long and hard thought on this matter over the years.
  - ricardobeat 5y ago
    Smoothing curves that look the most natural are often modeled after springs or friction. How is that not based on physics? Also, this argument makes total sense in isolation, but you still have no good reason for the gradient rendering on the web to stay as it is. It doesn’t look nicer or have any benefit other than backwards compatibility. This is the whole point of the article.
    - BlueTemplar 5y ago
      I find that it's better to think of colors as imaginary rather than real - helps with some common assumptions, including how colors would be the same for everyone.
    - fsloth 5y ago
      "Smoothing curves that look the most natural are often modeled after springs or friction. How is that not based on physics?" To be clear, when I say "based on physics" I mean "a value that can be computed from first principles, based on a specific model". For example the spectrum of a black body radiation can be said to be based on physics. Gradient is a mathematical entity. A "correct" gradient cannot be computed from first principles, nor does the article specify any specific model to use. There is no "correct" gradient. We can define some spec for a gradient and say "is according to spec" or "is not according to spec". Gradient is an interpolation between two triplets using some function. With gradient, in R3, we have two elements, a,b, and our task is to define a path g(t) from point a to point b so that g(0) = a and g(1) = b; The trivial way to do this is by way of linear interpolation g(t) = a * (1-t) + b * t however this has lots of aesthetic pathologies. The work around gradients is about finding the most pleasing g(t). If we start from the philosophical point of view that all smooth curves are based on intuition and inspiration from physics you are free to do so but this will summon an angry horde of mathematicians and computational geometry experts. "This is the whole point of the article." I think the point of the article was 1. Gradient rendering does not respect the spec 2. Any color computations should be done in linear color spaces The points are valid, but the motivational paragraph about gradients was more misleading than correct (IMO) hence my critical response above.
planede 5y ago
SVG gradient is specified to do the interpolation in sRGB space by default. However officially SVG 1.1 supports interpolation in linear colorspace, but no browser implements it AFAIK. https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationProperty https://www.w3.org/TR/SVG11/painting.html#ColorInterpolation... edit: An other mode of interpolation that is missing even from the spec is using premultiplied alpha. It would be essential to correctly render upscaled transparent raster images, where you don't want to see the "color" of the fully transparent pixels to leak through when it gets interpolated with a neighboring opaque pixel.
DrewADesign 5y ago
They should have said 'would be actually useful if' rather than 'should be.' From a design perspective, the utility of gradients that come to a muddy gray in the middle is nonexistent. Framing it as a way to make them more useful to people who need them rather than 'correct' would have been more productive, but way less likely to hit the top stories on HN. I'd say the transparency assertions are more dubious. There's a zillion ways to superimpose a color on an image and the one they suggest isn't even more consistently useful than the others, let alone 'correct.'
neltnerb 5y ago
I've been studying color theory a long time, including giving talks about color mixing and indeed HSL space specifically for a decade... I'm with you, there are ways that I think color mixing should be done but I would never say that mine is "right". That's silly, it's art. I think color mixing should be done using HSI colorspace (luminosity replaced with intensity defined as the sum of all light power outputs) with HS defined as per HSL/HSV and interpolation between any two colors done by a line drawn between the coordinates. The reason for this is that in my applications I use spotlights so obviously "total brightness" is way more important than "display lightness". It's just physics, and no right or wrong about it, it's a different display kind. This is "correct", the colorspace is explicitly constructed to be used in this way such that each step is perceptually even. But it also isn't necessarily what people want, to me "fade from red to cyan" automatically goes through white because of course it does... but what people usually mean is they want the hue to spin around at fairly constant saturation (ignoring that the direction of rotation matters) because it looks good. Red to orange to yellow to green looks vastly nicer in a gradient than going a direct path through white. That all said (mostly because I find it bizarre and fascinating even after a lot of study), the arguments in the OP are not about whether a given gradient is objectively right but rather whether they match the spec. Things should match the spec...
- fsloth 5y ago
  Yes, I agree it is bizarre and fascinating and everything you said about traveling in various colour spaces:) Also agree "should match spec" is always a valid argument. To repeat, and be clear, my critique was about what the page says "Physically correct color gradients..". This should have been "according to spec you should compute a gradient this way, and this is what your browser does...".
- bick_nyers 5y ago
  What's the best way to learn color theory? Like actually, properly learn it? I consider my interest in TV/Movies to cross over into the enthusiast category, and I work with medical images and video (compression mostly). I've spent time with the basics, and have recently started reading about BT 709 etc., but am unsure how best to really dive-in to color theory headfirst
mrob 5y ago
When you're using a ringing filter, sRGB is often a better colorspace for upscaling than linear RGB, because it distorts the ringing artifacts to make them less noticeable by putting them mostly in the highlights, not the shadows. It's not mathematically "correct", but it's better suited to human perception, similar to how minimum phase filters can perceptually outperform linear phase in audio processing, where pre-ringing is more noticeable than post-ringing. See "Catch #3" here: https://entropymine.com/imageworsener/gamma/ https://entropymine.com/imageworsener/gamma/ And you can sometimes get even better results using a sigmoidized colorspace. See: https://legacy.imagemagick.org/Usage/filter/nicolas/#detailed https://legacy.imagemagick.org/Usage/filter/nicolas/#detaile...
- planede 5y ago
  It still feels like that sRGB is accidentally better here, but a different, non-linear colorspace could outperform it for this case.
  - rnvannatta 5y ago
    Well, sRGB is sort of perceptually linear. Its roots trace back to a 50s technology compromise between perceptual linearity, color gamut, & encoding cost for CRTs that held up with only minor tweaks until CRTs stopped being widely used. Maybe a fancier model like oklab would outperform it for this specific case, but only in quality, not performance oklab is more expensive to convert to/from compared to sRGB, which is usually free as your backbuffer and textures are usually sRGB.
AtNightWeCode 5y ago
Agree. It is also a good idea to add a third color in middle for those kinds of gradients.
orbital-decay 5y ago
>"Color gradients are supposed to be equally bright around the midpoint" >This is false. Nobody mandates this. That's just because their wording is imprecise. If you replace color gradient with "perceptually linear hue gradient", which I think is strongly implied, then that would be 100% correct. Hue is a color coordinate completely independent from others like lightness, in a perceptually uniform color space. But you're on point - there's no right way to do it. Not because of it's a matter of taste or something (it's not). Problem is, there's currently no perceptually uniform color models! All models are uniform in some range but fail in various scenarios; human perception is still largely unexplored. As a result, getting it "equally bright" in different viewing conditions with varying intensities is an impossible task, especially when you know nothing about viewing conditions. You have to narrow it down to "good enough in common scenarios". Models like OKLab are trying to do exactly that.
petters 5y ago
From the article: > Physically correct color gradients (as you would get, for example, along an out of focus edge between colors) are equally bright around the midpoint, So I think there is an argument that using a linear color space is more correct.

by fsloth 5y ago

barbegal 5y ago

Whilst it is true there is no "correct" gradient, the author is making the reasonable assumption that the gradient can be simulated by two linear light sources (A and B) being shone onto a perfectly reflective (white) surface. Each light at full brightness is one end of the gradient. To calculate a colour at x% along the gradient you turn light A on to (100-x)% and B on at x%. The issue with this is that the human eye perceives brightness slightly differently at different frequencies (and combinations of frequencies) so the perceived brightness of the gradient may appear non linear. That isn't to say that the browser generated gradient is perceived in this way, it is generally even more non linear in its perceived brightness.

fsloth 5y ago
Gradients are design tools. The gradient interpolation function can be designed around some physical mixing hypothesis but there is no first principles rule as such. Focusing on the luminosity is only half of the battle. For nice looking gradients that are pleasing to design with, generally for aesthetic reasons you also want the perceived color saturation to be interpolated in a predictable way. For reference, here is a nice example of an approach to find a nice looking mixing function: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
barbegal 5y ago
As an addendum a good way to visualize gradients of equal perceived brightness is to use an Hue Chroma Luminance (perceived brightness) picker like http://tristen.ca/hcl-picker/ http://tristen.ca/hcl-picker/ As you can see, preserving luminance means you get a restricted range of gradients to choose from.
- planede 5y ago
  Linear interpolation in the HCL space is not equivalent to linear interpolation in a linear colorspace. For example in a linear colorspace if the interpolation goes from saturated blue to saturated yellow, then the the interpolation goes through gray, while in the HCL space the interpolation goes through more or less saturated colors. The possible colors produced by a display remain a cube in a linear colorspace, which is a convex object, so all gradients remain available.

Certhas 5y ago

Well... color is physics though. Three spectra that our eye are sensitive to span a vector space dual to the space of all light spectra [1]. That space naturally has a linear structure. You can have twice as much light of one color or the other, and you can add the light of different colors. So there _is_ a natural interpretation of linear interpolation between two colors in physics. Concretely: Imagine two lamps with the two colors and the same brightness. You start with one fully turned up and the other fully turned down. Then you increase the one while you turn down the other keeping the brightness constant.

fsloth 5y ago
IMO gradients are not based on physics any more than selecting a smoothing curve in animation is. They are design tools - even though physics can be used to analyze them. I say this as a software engineer with a MSc in physics and a computer graphics/traditional graphics afficinado :) - not to boast with my eminence as that would be silly on this site but just that I've given a long and hard thought on this matter over the years.
- ricardobeat 5y ago
  Smoothing curves that look the most natural are often modeled after springs or friction. How is that not based on physics? Also, this argument makes total sense in isolation, but you still have no good reason for the gradient rendering on the web to stay as it is. It doesn’t look nicer or have any benefit other than backwards compatibility. This is the whole point of the article.
  - BlueTemplar 5y ago
    I find that it's better to think of colors as imaginary rather than real - helps with some common assumptions, including how colors would be the same for everyone.
  - fsloth 5y ago
    "Smoothing curves that look the most natural are often modeled after springs or friction. How is that not based on physics?" To be clear, when I say "based on physics" I mean "a value that can be computed from first principles, based on a specific model". For example the spectrum of a black body radiation can be said to be based on physics. Gradient is a mathematical entity. A "correct" gradient cannot be computed from first principles, nor does the article specify any specific model to use. There is no "correct" gradient. We can define some spec for a gradient and say "is according to spec" or "is not according to spec". Gradient is an interpolation between two triplets using some function. With gradient, in R3, we have two elements, a,b, and our task is to define a path g(t) from point a to point b so that g(0) = a and g(1) = b; The trivial way to do this is by way of linear interpolation g(t) = a * (1-t) + b * t however this has lots of aesthetic pathologies. The work around gradients is about finding the most pleasing g(t). If we start from the philosophical point of view that all smooth curves are based on intuition and inspiration from physics you are free to do so but this will summon an angry horde of mathematicians and computational geometry experts. "This is the whole point of the article." I think the point of the article was 1. Gradient rendering does not respect the spec 2. Any color computations should be done in linear color spaces The points are valid, but the motivational paragraph about gradients was more misleading than correct (IMO) hence my critical response above.

planede 5y ago

SVG gradient is specified to do the interpolation in sRGB space by default. However officially SVG 1.1 supports interpolation in linear colorspace, but no browser implements it AFAIK. https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationProperty https://www.w3.org/TR/SVG11/painting.html#ColorInterpolation... edit: An other mode of interpolation that is missing even from the spec is using premultiplied alpha. It would be essential to correctly render upscaled transparent raster images, where you don't want to see the "color" of the fully transparent pixels to leak through when it gets interpolated with a neighboring opaque pixel.

DrewADesign 5y ago

They should have said 'would be actually useful if' rather than 'should be.' From a design perspective, the utility of gradients that come to a muddy gray in the middle is nonexistent. Framing it as a way to make them more useful to people who need them rather than 'correct' would have been more productive, but way less likely to hit the top stories on HN. I'd say the transparency assertions are more dubious. There's a zillion ways to superimpose a color on an image and the one they suggest isn't even more consistently useful than the others, let alone 'correct.'

neltnerb 5y ago

I've been studying color theory a long time, including giving talks about color mixing and indeed HSL space specifically for a decade... I'm with you, there are ways that I think color mixing should be done but I would never say that mine is "right". That's silly, it's art. I think color mixing should be done using HSI colorspace (luminosity replaced with intensity defined as the sum of all light power outputs) with HS defined as per HSL/HSV and interpolation between any two colors done by a line drawn between the coordinates. The reason for this is that in my applications I use spotlights so obviously "total brightness" is way more important than "display lightness". It's just physics, and no right or wrong about it, it's a different display kind. This is "correct", the colorspace is explicitly constructed to be used in this way such that each step is perceptually even. But it also isn't necessarily what people want, to me "fade from red to cyan" automatically goes through white because of course it does... but what people usually mean is they want the hue to spin around at fairly constant saturation (ignoring that the direction of rotation matters) because it looks good. Red to orange to yellow to green looks vastly nicer in a gradient than going a direct path through white. That all said (mostly because I find it bizarre and fascinating even after a lot of study), the arguments in the OP are not about whether a given gradient is objectively right but rather whether they match the spec. Things should match the spec...

fsloth 5y ago
Yes, I agree it is bizarre and fascinating and everything you said about traveling in various colour spaces:) Also agree "should match spec" is always a valid argument. To repeat, and be clear, my critique was about what the page says "Physically correct color gradients..". This should have been "according to spec you should compute a gradient this way, and this is what your browser does...".
bick_nyers 5y ago
What's the best way to learn color theory? Like actually, properly learn it? I consider my interest in TV/Movies to cross over into the enthusiast category, and I work with medical images and video (compression mostly). I've spent time with the basics, and have recently started reading about BT 709 etc., but am unsure how best to really dive-in to color theory headfirst

mrob 5y ago

When you're using a ringing filter, sRGB is often a better colorspace for upscaling than linear RGB, because it distorts the ringing artifacts to make them less noticeable by putting them mostly in the highlights, not the shadows. It's not mathematically "correct", but it's better suited to human perception, similar to how minimum phase filters can perceptually outperform linear phase in audio processing, where pre-ringing is more noticeable than post-ringing. See "Catch #3" here: https://entropymine.com/imageworsener/gamma/ https://entropymine.com/imageworsener/gamma/ And you can sometimes get even better results using a sigmoidized colorspace. See: https://legacy.imagemagick.org/Usage/filter/nicolas/#detailed https://legacy.imagemagick.org/Usage/filter/nicolas/#detaile...

planede 5y ago
It still feels like that sRGB is accidentally better here, but a different, non-linear colorspace could outperform it for this case.
- rnvannatta 5y ago
  Well, sRGB is sort of perceptually linear. Its roots trace back to a 50s technology compromise between perceptual linearity, color gamut, & encoding cost for CRTs that held up with only minor tweaks until CRTs stopped being widely used. Maybe a fancier model like oklab would outperform it for this specific case, but only in quality, not performance oklab is more expensive to convert to/from compared to sRGB, which is usually free as your backbuffer and textures are usually sRGB.

AtNightWeCode 5y ago

Agree. It is also a good idea to add a third color in middle for those kinds of gradients.

orbital-decay 5y ago

>"Color gradients are supposed to be equally bright around the midpoint" >This is false. Nobody mandates this. That's just because their wording is imprecise. If you replace color gradient with "perceptually linear hue gradient", which I think is strongly implied, then that would be 100% correct. Hue is a color coordinate completely independent from others like lightness, in a perceptually uniform color space. But you're on point - there's no right way to do it. Not because of it's a matter of taste or something (it's not). Problem is, there's currently no perceptually uniform color models! All models are uniform in some range but fail in various scenarios; human perception is still largely unexplored. As a result, getting it "equally bright" in different viewing conditions with varying intensities is an impossible task, especially when you know nothing about viewing conditions. You have to narrow it down to "good enough in common scenarios". Models like OKLab are trying to do exactly that.

petters 5y ago

From the article: > Physically correct color gradients (as you would get, for example, along an out of focus edge between colors) are equally bright around the midpoint, So I think there is an argument that using a linear color space is more correct.