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

I'm glad you enjoyed reading the article. I completely agree on not really having a "right" way to blend gradients. For that reason I almost ended up omitting the gradient example from the article because doing it "correctly" in linear space does not always yield the most pleasant looking results. Generating perceptually fine looking gradients is another huge (and very interesting!) topic in itself, so maybe I'll discuss that in another post in the future.

Until then, have a look at this online gradient generator tools that can use five different algorithms (there's some explanation provided as well for each method):

http://davidjohnstone.net/pages/lch-lab-colour-gradient-pick...

I also recommend reading the superb 'Subtleties of Color' NASA article series on the matter:

http://earthobservatory.nasa.gov/blogs/elegantfigures/2013/0...

PS: I'm slightly confused about your comment on the black to white gradient though. Are you saying the gradient on Figure 1 looks more even to you than on Figure 2? In that case, I think your monitor is miscalibrated, so try gamma-calibrating it first then have another look. Your opinion might change :)



It took me a while, but I finally figured out why your color gradients were different in nature to the grayscale gradient.

All of your color gradients use a constant light output. You transition from one fully saturated primary to another, or two fully saturated primaries to two others. For that to look natural, the interpolated values should also produce a constant light output.

The grayscale ramp is not a constant light output, and the light intensity needs to follow a perceptual curve to look natural.


On the greyscale gradient- the other way around: Figure 2 looks more even, being a perceptually linear gradient, ie. calculated "gamma incorrectly". Which is to say it's not what a real light would look like (if a light had linear falloff in illumination of this surface?).


I think you are supposed to add the colors then divide by two to keep the brightness constant.

This is not how light behaves (it doesn't divide by two on a wall), but it's what you need to make a gradient.


Not divide by two; you have to use the gamma transfer curve.




Consider applying for YC's Winter 2026 batch! Applications are open till Nov 10

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

Search: