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

101–110 of 151 posts

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

#101

Post by ireflect »

Jerry2 wrote: post #100

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 dif…

That's a poor take.

The solution is to do linear interpolation in HSL instead of in RGB. It's a simple and useful insight and the article does a fantastic job explaining and motivating it. And then goes so far as to supply an interactive tool to try it out!

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

#102

Post by rangewookie »

scotty79 wrote: post #99

Is noone bothered that proposed gradient alternatives go through additional completely different colors?

Yeah... Is it really a 2-point gradient if it contains 5 different colors? The grey bugs me, but surely turning a gradient into a rainbow is not a solution. More like, an alternative.

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

#103

Post by cush »

Jerry2 wrote: post #100

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 dif…

Blue plus yellow makes green…

What you’re describing would result in a yellow to blue gradient having green in the middle - at least that’s what would be interpreted by the human eye.

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

#104

Post by Jerry2 »

ireflect wrote: post #101
Jerry2 wrote: post #100

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 dif…

That's a poor take. The solution is to do linear interpolation in HSL instead of in RGB. It's a simple and useful insight and the article does a fantastic job explaining and motivating it. And then goes so far as to supply an interactive tool to try it out!

If you interpolate over H, you will always introduce other colors into your gradient.

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

#105

Post by mkj »

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…

RGB mixing doesn't seem very natural though. In physical reality you do end up with that rainbow, a random example mixing paints https://www.justpaint.org/wp-content/uploads/2015/11/JP26.pd...

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

#106

Post by orbital-decay »

smagoun wrote: post #88

This fantastic article proposes new colorspaces (okhsl, oklab) for color pickers and is worth the read for anyone interested in color: https://bottosson.github.io/posts/colorpicker/ Many similar problems to solve as in the gradient generator, but approached from a different point of view, and with some novel ideas.

They aren't exactly novel, it's mostly an attempt to connect the modern color science with actual software development. Image processing in software (even that has the dominating market share like Photoshop) is still largely built around computing convenience, not around human perception or the mapping of physical world to it. Which is sad to see as the models are known for a long time but still mostly hidden in academic obscurity. I hope people like Björn Ottosson will help to change that.

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

#107

Post by marcan_42 »

peterisza wrote: post #68

Related video: https://www.youtube.com/watch?v=LKnqECcg6Gw

This needs to be higher up. It's not just about color interpolation - this is a problem with nonlinear color spaces. If you interpolate in a proper linear colorspace, you still get a desaturated color in the middle, but it's the proper brightness and it looks a lot better.

Gamma correction is the bane of computer graphics, and in 2022 there is absolutely no excuse for not using linear colorspaces for all image processing. We have the RAM. 8-bit non-linear colorspaces are a compression technique and should be only used for file formats, not image processing, ever. So many things would look much better and correct if we stopped trying to incorrectly process images in a compressed representation without uncompressing them first.

For comparison: nobody has used A-law or mu-law audio compression ever since digital POTS lines, and we certainly don't process audio in that form, ever. It's the same exact concept as storing pixel values in 8-bits with a gamma function. But somehow we think we can get away with processing images in that domain. I guess it's because if you try to do that with audio, the result is obviously wrong to any human ear, while if you try to do it with images it only looks somewhat wrong, not completely wrong...

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

#108

Post by mark-r »

jahewson wrote: post #71
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 that hue rotation makes for some weird gradients. Linear RGB is an acceptable color space for gradients, because gamma correction is accounted for. But performing a linear interpolation in sRGB or the like leads to a linear gradient which appears to ramp steeply from one color stop to the next. However, if you compare Linear RGB with CIELAB then you'll notice the same thing, the CIELAB gradients look smoother…

LAB is good but not great. If you do a gradient from pure green to pure blue, you'll see some purples and other color oddities in the mix.
Post reply on HN