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

141–150 of 151 posts

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

#141

Post by capitainenemo »

tda wrote: post #118
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 p…

https://github.com/gvlsq/palettize how about this approach?

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

#142

Post by capitainenemo »

capitainenemo wrote: post #141
tda wrote: post #118

Earlier quoted context omitted.

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

https://github.com/gvlsq/palettize how about this approach?

(er, for the initial palette generation, that is)

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

#145

Post by eternityforest »

The problem with HSL gradients is that you now have a completely different color, and the whole thing looks like nothing found in nature. Unless the rainbow is an intentional design element, it just doesn't quite look right.

It's useful, but not a substitute for really carefully picking your colors so it all works.

One of the harder things in creative projects is when you have two individual elements you want to use, but you don't like what happens if you add both.

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

#146

Post by mcv »

meetups323 wrote: post #92
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 re HSL, HCL, and HSV, however the LAB gradients do tend to look nicer than RGB ones, without passing through random other hues in the middle.

I know nothing about gradients, but wouldn't dithering provide the best results? That way you're truly mixing those two colours and not going through completely different colours based on some arbitrary numerical representation of the colours.

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

#147

Post by meetups323 »

mcv wrote: post #146
meetups323 wrote: post #92

Earlier quoted context omitted.

I agree re HSL, HCL, and HSV, however the LAB gradients do tend to look nicer than RGB ones, without passing through random other hues in the middle.

I know nothing about gradients, but wouldn't dithering provide the best results? That way you're truly mixing those two colours and not going through completely different colours based on some arbitrary numerical representation of the colours.

Only if you want a dithered look, which oftentimes you don't.

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

#148

Post by roryokane »

udbhavs wrote: post #43
gwern wrote: post #16

Earlier quoted context omitted.

No, it's still bad. For example, it hijacks the space bar. You're spacing/pgdwning like normal when it pops out, then it hijacks the space to open up a nag modal. It was terrible when it was Clippy, it's terrible when it's a Bob the Builder avatar. Comeau's website never sparks joy in me because I'm always wondering what the next bullshit will be (was this the one which for a while was doing sparkles after the mouse?…

Can you give examples of sites that do spark joy for you? Whenever I encounter hate for certain design decisions online I like to know the alternative I should strive to follow instead.

The person who complained, Gwern, has their own site at https://www.gwern.net/. It’s another article-focused site, so the designs should be mostly comparable. However, Gwern’s articles are much longer, so their design choices might reflect that.

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

#149

Post by mcv »

meetups323 wrote: post #147
mcv wrote: post #146

Earlier quoted context omitted.

I know nothing about gradients, but wouldn't dithering provide the best results? That way you're truly mixing those two colours and not going through completely different colours based on some arbitrary numerical representation of the colours.

Only if you want a dithered look, which oftentimes you don't.

I guess it depends on the size of your pixels. But as long as your pixels are small enough, I think this is the only way to have a gradient go straight from one colour to an opposite colour without going through either grey or a multitude of other colours.

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

#150

Post by rikroots »

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…

Following up on my comment (for posterity). I've now released the new code to my library. Includes a demo of using the full range of CSS color strings to set color in the canvas[1], and also a demo of my reducePalette (with dithering) filter[2] - I've no idea if the filter's output is 'Good Enough' for Image Engineering work, but I'm happy with the results.

[1] - https://scrawl-v8.rikweb.org.uk/demo/canvas-059.html

[2] - https://scrawl-v8.rikweb.org.uk/demo/filters-027.html

Post reply on HN