Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Gradients that avoid the “gray dead zone”

joshwcomeau.com

Post reply on HN
Print view View original

91–100 of 151 posts

Re: CSS Gradients that avoid the “gray dead zone”

#91

Post by chrisseaton »

thaumasiotes wrote: post #90
chrisseaton wrote: post #72

Earlier quoted context omitted.

> It seems unlikely that King Edward III meant to ban games that involved walking on your hands, or perhaps brachiating. But this argument assumes that the etymology of 'handball' must be the same as 'football'. Football could be called that because you play it on foot, and handball could simultaneously be called that because you use your hand to strike the ball. There's no contradiction there.

No, all the argument assumes is that handball (and hockey) are played on foot. That would be enough for them to be called "football" under the theory that football is a class of games that aren't played on horseback.

> That would be enough for them to be called "football" under the theory that football is a class of games that aren't played on horseback.

If you followed this argument you'd be confused why we have basketball when netball already covers games that involve a net and a ball. Not all games are named by the same person with the same naming ideas.

Re: CSS Gradients that avoid the “gray dead zone”

#92

Post by meetups323 »

jrowen wrote: post #64

This article seems to give RGB a bad rap but I think it makes the most sense for gradients. I wouldn't want a yellow to blue gradient to cycle through a (partial) rainbow of colors. But I also wouldn't really ever choose to make a pure yellow to pure blue gradient. Most pleasing gradients you see in the wild use colors that are more similar to begin with, so it's a bit of a strawman. It's really just about carefully…

I agree re HSL, HCL, and HSV, however the LAB gradients do tend to look nicer than RGB ones, without passing through random other hues in the middle.

Re: CSS Gradients that avoid the “gray dead zone”

#93

Post by tout »

SpectralName wrote: post #57
pippy wrote: post #51

Earlier quoted context omitted.

I highly recommend reading Human color vision / Peter K. Kaiser and Robert M. Boynton. It's a great read if you've gone down the color vision rabbit hole as it has nearly every single topic in regards to human color perception. The biggest surprise for me was that there's still a bit of debate about how exactly neurons in the eye are wired together to produce the color signals that go to the brain.

I read an amazing article once that described the representations of color at different processing levels in the human brain. For example, the 3 types of rods in the retina sense R/B/Y intensity, but at some point it is transformed into a different 3d representation with a R-G axis, a B-Y axis, and a greyscale intensity axis. There was some implication that this is information-theoretically optimal in some sense for…

Was it Rob Pike's post on (the inaccuracy of the term) color blindness? https://commandcenter.blogspot.com/2020/09/color-blindness-i...

Re: CSS Gradients that avoid the “gray dead zone”

#94

Post by leni536 »

The darkish gray dip is mostly avoided by using a linear colorspace. Interpolating in HSV can introduce weird artifacts. Mostly due to H being circular, if you naively interpolate between two close shade of red, you might go through all of the colors of the rainbow.

Interpolaring in a perceptual colorspace might make sense in certain applications, but if arithmetic on color values is involved then a linear colorspace is a good default (and premultiplied alpha, but that's an other story).

Re: CSS Gradients that avoid the “gray dead zone”

#97

Post by makeworld »

bugeats wrote: post #95

> Now, HSL isn't necessarily the best color mode to use in every situation; it tends to produce gradients that can be overly bright and vivid, because it doesn't take into account human perception. Shout-out to to HSLUV which does exactly that. https://www.hsluv.org/

Or likely better, Okhsl and Okhsv: https://bottosson.github.io/posts/colorpicker/

Re: CSS Gradients that avoid the “gray dead zone”

#100

Post by Jerry2 »

So, the "solution" for having a gradient go from yellow to a blue (via a gray region) is to have yellow go through green and then blue? Color me unimpressed.

I remember years ago using non-linear functions to avoid a similar problem in a different field. I bet the same solution would work here and wouldn't look so "wrong". You could pick some non-linear fun to interpolate between values. And you could interpolate different RGB channels at an offset. The reult would be less gray in the middle.

Post reply on HN