Live data from Hacker News

CSS Gradients that avoid the “gray dead zone”

joshwcomeau.com

81–90 of 151 posts

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

#81
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…

[deleted]

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

#82
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 think this is for those cases where you'd like to create a striking gradient but RBG falls kind of flat. For a lot of us it wouldn't be apparent why that is, just disappointing. This tool remedies that by giving you a vibrant and striking gradient regardless of what you feed it.

I do agree about the rainbow of colours though. As someone who understands how RGB works and has worked with colour a lot for decades, this tool is kind of un-intuitive at a glance. That's probably alright though. I can continue hand-crafting gradients because I know how to. Most people using a generator likely don't know how to.

Otherwise it's also a great exercise in learning about and then teaching these things, which Josh is great at.

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

#84
post #51

Earlier quoted context omitted.

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…

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 recommended using a matrix to transform color spaces, which i've also done a codepen for.

Interestingly the opponent process mirrors the LAB color space, which is soon going to be available in Safari. This is pretty cool and can enable developers to color coordinate easier.

I'm going to give the webpage you linked a good read, looks very interesting.

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

#85
post #3

Because Hue is a degree, you can walk either clockwise or counter-clockwise. That is why in the Javascript widget (the one to select midpoints and color spaces), HSL v.s. Lab v.s. HCL acted quite differently. You probably also need a tweak for that in the "Gradient Generator" widget too.

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

Shouldn't it pick the way with the shortest distance? Otherwise you'd get an entire rainbow between green and yellow! (Or is it already doing that but which distance is shorter depends on the color space used?)

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

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

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

#89
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…

This comment sheds a little bit of insight here: https://news.ycombinator.com/item?id=29895421. The original article chose to always go "clockwise" around the color wheel, picking up lots of different colors and giving the appearance of a rainbow, instead of taking the shorter, more naturalistic route of blending through teal & green.

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

#90

Earlier quoted context omitted.

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.

No, all the argument assumes is that handball (and hockey) are played on foot. That would be enough for them to be called "football" under the theory that football is a class of games that aren't played on horseback.
Post reply on HN