Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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.



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/


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/

As you can see, preserving luminance means you get a restricted range of gradients to choose from.


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.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: