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

121–130 of 151 posts

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

#121

Post by fsloth »

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…

It's actually also about the interpolation path as well. Creating gradients in 3 component colorspaces is totally analogous to creating interpolation splines in 3d euclidean coordinates.

The fixed points define only the end points of the splines. The space between the end points corresponds to the color value along the interpolation curve.

If we are in an rgb cube, we notice the "gray zone" is along the diagonal from (0,0,0 to 1,1,1).

If we take two colors opposite of this diagonal (say color_a={r=0.5, g=0.5, b=0.0} and color_b = {0.5,0.5,1 0} we notice if we linearly interpolate we go through gray (0.5,0.5,0.5) in the middle.

If in stead we move along a curved path that avoids the diagonal, trying to maintain the saturation we get a much nicer result.

This "curved path of roughly equal saturation" is easier to define in a colorspace such as HSV where the saturation is one of the spatial coordinates.

But as I always say, there is no theoretically "correct" way to define a gradient, only techniques optimized for some specific use case.

My personal opinion is that generally linear interpolation in RGB results in the least satisfying gradients but that is just my _taste_.

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

#122

Post by alkonaut »

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 was expecting the article to eventually explain how to make a gradient between two colors, without passing neither anything looking like "third hue" nor gray.

This is perhaps not possible in theory, but just adjusting the gradient curve so that the effect is minimized should be possible.

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

#123

Post by jebronie »

scotty79 wrote: post #99

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

Not really, it's just a gradient along the hue axis, instead of fading colors into each other. It's not more or less wrong than doing it the other way.

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

#124

Post by rikroots »

aloer wrote: post #116
rikroots wrote: post #37

Just before Christmas I got an urge to add a dither filter to my JS canvas library. The past few weeks have certainly been a very intense adventure through a very deep rabbit hole involving color spaces, color distances and discovering how to generate a best-fit reduced palette of colors and then dither it (hello, blue noise!) I finally managed to complete the work last week and I'm quite happy with the results. Usin…

How did you implement hit testing for events? Does it draw on a second canvas with color hashing like konva js?

I use a combination of Path2D and ctx.isPointInPath() - code here[1], line 1502 onwards

[1] https://github.com/KaliedaRik/Scrawl-canvas/blob/master/sour...

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

#125

Post by rikroots »

tda wrote: post #118
rikroots wrote: post #37

Just before Christmas I got an urge to add a dither filter to my JS canvas library. The past few weeks have certainly been a very intense adventure through a very deep rabbit hole involving color spaces, color distances and discovering how to generate a best-fit reduced palette of colors and then dither it (hello, blue noise!) I finally managed to complete the work last week and I'm quite happy with the results. Usin…

I am very interested in the "best-fit reduced palette of colors" approach, but then to create mosaics. Say you have lots tiles/beads/bricks/marbles whatever in a handful of colors (and not covering the entire color space, but say three shades of blue, brown and bright pink) how can you represent a full color image as accurately as possible using only that very limited palette (and in a fairly limited resolution, as p…

The approach I finally settled on was: check each pixel in the image to build up a list of (RGB) most popular colors and to memoize new colors into LAB values; sort the color data into commonest first; then build up the required palette from commonest downwards, excluding colors that were too close to each other based on a distance measure. Then you can go back to the original image and measure its color against the palette colors, from which you can determine the 3 palette colors closest to it. From that you can give each pixel a propensity range of the likelihood of it taking on one of those 3 colors and run it against a randomly generated value, or a set of preset values for blue noise.

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

#129

Post by Asooka »

circlingthesun wrote: post #120

There is a related video by minute physics about how the RGB color space stores the square root of the brightness of each color channel, because human color perception is roughly logarithmic. Bad color blending is therefore pretty commonplace because it uses the average of square roots instead of the square root of the average of the original brightness values. See: https://www.youtube.com/watch?v=LKnqECcg6Gw

If you blend values in linear space, you'll linearly interpolate from the starting physical intensity to the ending physical intensity. This is a very reasonable default, corresponding to an objective physical measure. Also it makes your gradient appear roughly the same to people with reduced colour perception. Other modes would be useful too, maybe something that goes through HSB colour space, but I suspect designers would find it easier to design their desired gradient in a program of their choosing that then outputs a piecewise linear approximation.

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

#130

Post by iLoveOncall »

I find the article extremely dishonest as it goes from using a "yellow to blue gradient" (let's call that the initial requirement) and turns it into a supposedly better "yellow to orange to red to pink to purple to blue" gradient.

I think anybody that has to choose between the "gray dead zone" and the "rainbow" will ALWAYS settle for the "gray dead zone" if the initial requirement is to make a "yellow to blue gradient".

Does it contain valuable information? Yes. Does it avoid the "gray dead zone" problem? Not at all, unless you claim that bringing another problem magnitudes larger is "avoiding the problem".

Post reply on HN