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

51–60 of 151 posts

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

#51

Post by pippy »

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

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

#52

Post by zamadatix »

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…

Firefox just released version 96 today and it comes with HWB() as well.

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

#54

Post by chrisseaton »

edoceo wrote: post #24
red_trumpet wrote: post #20

Earlier quoted context omitted.

> Because Hue is a degree A bit nitpicky but: Hue is an angle, degree is it's unit. Like the width of a football field is a length, meter is it's unit. Otherwise, good point!

For Americans: it's football (the one with your hands) and measured in yards

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

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

#55

Post by egypturnash »

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…

My day job is "artist" and the "everything looks terrible forever" scenario depicted here is rather exaggerated, IMHO. I can enjoy something pretty when I see it but I can also let ugly things slide by without worrying about it.

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

#56

Post by burticlies »

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

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

#57

Post by SpectralName »

pippy wrote: post #51
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 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 representing images sampled from the natural world. Anyone know what I'm talking about?

The book you mention seems to cover similar ground: http://www.yorku.ca/eye/toc.htm

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

#60

Post by dsmmcken »

dexwiz wrote: post #12

Love the article. Small UX gripe: it took me a while to figure out how to use the gradient sliders. The box at the top looks like a handle, and I was trying to interact with that. But it looks like I have to click the bar to move the box, but there is no visual indicator that the bar itself is a point of interaction other than a cursor change (which is really subtle).

Yeah, I would have considered adding ball with the same styling as the other drag handles at the tip, and remove the ball at the center pivot point. Mimicking the affordance elsewhere, behavior can stay the same as is.
Post reply on HN