Hacker News Reader

Comment by jbverschoor | Hacker News Reader

Well, the gradient is specified as an RGB gradient, yet the post talks about brightness. That's not the right comparison. There are different color models, and a gradient will simply interpolate between the values.

A better example would be to use HSL or LAB for the gradients (Red->Green):

  background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(120, 100%, 50%));

  background: linear-gradient(to right, lab(50% 128 128), lab(50% -128 128));
  background: linear-gradient(to right, lab(50% 128 128), lab(100% -128 128));

The two different LAB values for "green" show that if you're just changing Lightness, you'll get a darker share of green. The RGB green needs 100% Lightness.

HSL produces the same output as an RGB gradient, which is wrong, as only L should be modified.

LAB works only in safari, and although the result is slightly different, it's still incorrect, probably due to my conversion

View on HN

I don't think this is the best approach. There are two independent things in a gradient - the colors to interpolate between and the interpolation path - and I would not tie them together. If I specify the same colors just using different color models, then I still want the same gradient unless I explicitly demand different interpolation paths. You would not want that interpolating between 0 and 42 yields a different result than interpolating between 0x00 and 0x2A, would you?

My ad hoc expectation would be that I get a linear interpolation of perceived brightness, saturation, and color independent of how I specified the color to interpolate. Or maybe even better a path of minimal perceived color difference with uniform perceived color difference along the path which is probably at least slightly different from interpolating brightness, saturation, and color independently.

Values in different colorspaces are not fully interchangeable.

Some values don’t exist. Some might have multiple values in another space

That doesn't really matter, you don't really need to convert between different color spaces that much. Whatever the user specifies you convert into one color space, say CIE XYZ or whatever suits the interpolation you want to perform, and then you convert the interpolation result into whatever you need as the output color space. The only real requirement is that the interpolation space covers all input spaces, then it does not matter that not all input spaces cover the same colors or have non-unique representations.

While it's true that a LAB gradient will produce a more perceptually uniform gradient, it doesn't alter the article's point that sRGB isn't a colorspace. It has an associated nonlinear gamma function that is used to help compress values to 8-bit, and the result is that interpolating between two sRGB values is not the same as interpolating between them in a proper RGB colorspace, with the result that you'll get brightness problems.

So yes, LAB will produce more perceptually uniform gradients than RGB, but browsers are exacerbating the problems of RGB gradients by not implementing them properly.

Reply on news.ycombinator.com