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

131–140 of 151 posts

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

#131

Post by michaelgrafl »

iLoveOncall wrote: post #130

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

It's also dishonest in the sense that gradients from bright yellow to bright blue or other combos that produce a grey deadzone are probably pretty hard to find in the wild.

I've tried the gradient generator, and I found it actually a bit difficult to pick colors that produced a significant grey zone.

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

#132

Post by OJFord »

hammock wrote: post #53

What is the LAB color space that is provided in the tool but not discussed in the article? For all the hubbub about HSL and HCL, LAB looks the best to me.

Maybe it's not discussed because in CSS it's only supported by Safari (so far): https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...()

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

#133

Post by leephillips »

robocat wrote: post #36
Trufa wrote: post #8

As a (web/app) developer, I'd really wish I had any sort of talent do beautiful things, this person clearly has a sense of aesthetics that I don't, while I know that practice would make it better, I just don't feel that I'd get there. Congrats to the author for such a cool product!

Red pill: truely accept that design is very important, make the hard effort to improve your aesthetic work over time to improve your personal taste, listen to graphic designers and learn their taste from them. Become the master of both aesthetics and engineering, reap the significant rewards as one of the few that can navigate the compromise between the disciplines. The cost is that the world slowly becomes terrifyin…

One of the best comments ever.

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

#134

Post by monokai_nl »

As part of my logo generator I've spent quite some time to create a color algorithm that takes one color and create a gradient based on an intensity slider and a "mode". It proved quite useful, so I've implemented it as a free stand alone tool for web developers to quickly create aesthetically pleasing CSS gradients:

https://mybrandnewlogo.com/color-gradient-generator

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

#135

Post by user-the-name »

skavi wrote: post #112
makeworld wrote: post #97

Earlier quoted context omitted.

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

https://bottosson.github.io/misc/colorpicker/#738951 wow, the "Ok" family is clearly much better at modeling human perception.

Sure, but that is often not as useful as it sounds.

For instance, on your page, try to pick the most intense green using one of the Ok pickers. The edges of the physically representable colour space can be pretty important for many tasks.

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

#136

Post by SpectralName »

pippy wrote: post #84
SpectralName wrote: post #57

Earlier quoted context omitted.

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…

It seems the article you're talking about is the opponent color process, which here's some great articles about it: https://www.handprint.com/HP/WCL/color2.html https://blog.asmartbear.com/color-wheels.html I had some fun modeling the color space in 3d on codepen: https://codepen.io/torleifw/pen/jOwjPxp (or a more boring slider option here: https://codepen.io/torleifw/pen/OJgdyPJ ) One of latest papers I've read reco…

It was your first link, thank you! What a great site.

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

#137

Post by warp »

NelsonMinar wrote: post #59

As the article says, the core problem is CSS interpolates in RGB colorspace. CSS Color 4 seems to have adapted a color space parameter for interpolation in its drafts. See discussion here: https://github.com/w3c/csswg-drafts/issues/5833

HTTP203 has two episodes on this which I found really helpful in understanding what color space related changes are being made in CSS and why they matter.

- About gradients in particular: https://youtu.be/Uh95jZPTDfw?t=1111

- Original episode about color spaces: https://youtu.be/cGyLHxn16pE

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

#138

Post by beardyw »

mkj wrote: post #105
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...

Subtractive colour mixing in pigments is way more complex than the light on a monitor. Each pigment has its own distribution of absorbed and reflected wavelengths so mixing any two colours is mostly try and see in practice.

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

#139

Post by r2222 »

You can create multi-stop gradients easily with this tool, but doing so with pure blue and yellow looks nothing like the blend of those two colors would look. I think you should just pick colors that fit better together, unless the rainbow effect of walking along the hue angle is the effect you’re going for.

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

#140

Post by BeFlatXIII »

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

This is still an issue on iPhones today. When you have a notification icon and start to pull your Home Screen to make it blurry, the border of the red circle gets inexplicably dark. Whatever happened to Apple’s famed attention to detail. This has been the case since the iPhone 6 was new, if not earlier.
Post reply on HN