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

71–80 of 151 posts

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

#71

Post by jahewson »

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 as linear movement through the color space more closely mirrors linear movement through our human perceptual system.

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

#72

Post by chrisseaton »

thaumasiotes wrote: post #65
chrisseaton wrote: post #54

Earlier quoted context omitted.

American football is called football because you play it on your feet, as opposed to on a horse.

This doesn't seem to be a very well-supported theory. https://en.wikipedia.org/wiki/Football#Etymology > It is widely assumed that the word "football" (or the phrase "foot ball") refers to the action of the foot kicking a ball. There is an alternative explanation, which is that football originally referred to a variety of games in medieval Europe, which were played on foot. There is no conclusive evidence for either…

> 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.

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

#73

Post by karaterobot »

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…

> As an engineer you can subversively affect graphic design and you often have massive control over aesthetics.

For most of my career I was a hybrid designer/developer. There's definitely a dialog between them, and engineering enables and constrains some elements of the esthetics, but in general I would say it works the other direction more often than not.

That's why when I read about von Tiesenhausen’s Law of Engineering Design, it really rang true for me: "If you want to have a maximum effect on the design of a new engineering system, learn to draw. Engineers always wind up designing the vehicle to look like the initial artist’s concept."

We're just talking about esthetics, rather than functionality or purpose or process, which are much more of a give-and-take.

This is why I eventually just moved straight over to design: so much of product development is path-dependent, and designers exert a ton of leverage just by creating documents upstream of engineers.

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

#75

Post by Dove »

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!

I can recommend The Non-Designer's Design Book, by Robin Williams, as a great way to dip a toe into the world of design. It won't make you a designer, but it will help you fake it a bit when you don't have one. I found the suggestions surprisingly effective in my own work.

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

#76

Post by s1mon »

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.

LAB is one of the better ways to to start with perceptually uniform spacing of the colors. Also if the path through the color space avoids A and B being near 0, then the gray dead zone problem that this talks about goes away.

There are multiple ways to look at differences in LAB space unfortunately. Each one more mathematically complex, yet more perceptually accurate: http://zschuessler.github.io/DeltaE/learn/

For a ton of useful equations and calculators: http://www.brucelindbloom.com/index.html

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

#77

Post by strken »

hwatkins wrote: post #6
xibalba wrote: post #4

I really, really like Mr. Comeau's "Me" avatar. In fact, his whole site is quite beautiful and pleasing.

I agree, most sites are very aggressive with popups and modals, that having a small pleasant avatar peak out at you is a nice change.

When it showed up, I gasped and jerked my hands away from the keyboard. It felt like a jump scare.

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

#78

Post by kazinator »

There are more colors spaces than just HSV and RGB.

The HSV gradients look wonky; the HSV space was designed for easy color picking UI with efficient calculations on 1980's hardware, not for interpolation.

I found this site where you can play with interpolation via various color spaces:

https://colordesigner.io/gradient-generator

LAB looks good; but interestingly, going from yellow to blue, it doesn't interpolate through green at all. Which makes sense, since yellow-blue is one axis in LAB, whereas red-green is another.

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

#79

Post by [deleted] »

burticlies wrote: post #56
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.

It’s a color space designed to be perceptually uniform. So as you blend through colors the saturation appears to stay the same. Check some of the reds and greens in the other color spaces and see how they get really saturated. https://en.m.wikipedia.org/wiki/CIELAB_color_space

[deleted]

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

#80

Post by [deleted] »

burticlies wrote: post #56
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.

It’s a color space designed to be perceptually uniform. So as you blend through colors the saturation appears to stay the same. Check some of the reds and greens in the other color spaces and see how they get really saturated. https://en.m.wikipedia.org/wiki/CIELAB_color_space

[deleted]
Post reply on HN