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

111–120 of 151 posts

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

#111

Post by allenu »

strken wrote: post #77
hwatkins wrote: post #6

Earlier quoted context omitted.

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.

It honestly scared me too when I saw it pop out of the side of the screen. I've viewed this blog before and had the same reaction. It's cute, but I'm sure you and I aren't alone.

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

#112

Post by skavi »

makeworld wrote: post #97
bugeats wrote: post #95

> Now, HSL isn't necessarily the best color mode to use in every situation; it tends to produce gradients that can be overly bright and vivid, because it doesn't take into account human perception. Shout-out to to HSLUV which does exactly that. https://www.hsluv.org/

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.

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

#113

Post by Ericson2314 »

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.

This should be the submission. Color is endlessly hard and OP is babysauce.

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

#114

Post by eyelidlessness »

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…

Ultimately it’s about perceptual color versus actual light. A red/blue gradient should be almost entirely transparent (ahem, grey if that’s what you’re getting from lack of data in RGB), but it too will “cycle through” and produce colors that don’t exist between red and blue. You’re expressing preference for a particular substitution approach that makes sense to you, which is perfectly fine as a preference but that’s all it is.

Edit: or it will produce the full spectrum between red and blue but that’s obviously not your preference.

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

#115

Post by andreareina »

s1mon wrote: post #76
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…

HCL is also perceptually uniform and easier to interpret and predict what any given change is going to do.

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

#116

Post by aloer »

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?

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

#118

Post by tda »

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 placing 10k tiles is not fun).

I have had some success manually using Photoshop to generate a reduced color space image to only 5 distinct colors (probably optimally chosen by the algorithm) and then remapping those 5 colors to 5 the 5 colors I actually have. There must be better ways

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

#120

Post by circlingthesun »

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
Post reply on HN