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

31–40 of 151 posts

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

#31

Post by dexwiz »

kevincox wrote: post #22
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).

It looks like a note has been added describing how to use the control. But obviously this is admitting that this control isn't intuitive enough.

Yeah I see that now. Having different parts be focusable versus clickable isn't a great choice imo.

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

#33

Post by floatingatoll »

tvanantwerp wrote: post #13

I used to do gradient interpolations all the time in dataviz using D3, and using HSL/HCL/LAB always created better gradients. I wish we had color mode options in CSS gradients, but this is a good workaround for now.

Your wish is granted by w3/css-color-4:

§ 12.1 Color space for interpolation https://www.w3.org/TR/css-color-4/#interpolation-space

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

#34

Post by hutzlibu »

alberth wrote: post #26

For those who didn't realize, there's a ton of interactive sliders on that page. (it didn't dawn on me until I accidentally bumped a slider and realized the page was interactive)

Or just go to the proper gradient generator.

https://www.joshwcomeau.com/gradient-generator/

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

#36

Post by robocat »

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 terrifyingly ugly, because you have to opened your eyes to hideous monstrous graph everywhere; even a simple sign on a road can make you physically ill. You are surrounded by evil, currently your mind is just closed to it. One friend of mine struggles to go to shopping, because the screeching noise of barbaric design hurts their psyche. You already struggle against the cesspit of bad engineering that surrounds you everyday: take the red pill and more than double your suffering.

Blue pill: keep ignorant of graphic design, enjoy mocking the trivial and meaningless exploits of designers, laugh at their talk of the energy or feelings of a font (idolising even just one minute part of a single character), remain happy in your ignorance. The cost is that you will always feel something is missing in your life and work. There is a worthwhile struggle for meaning in the dark arts, you will miss out on the pleasure of creating form from the void.

There are profound joys of creating something beautiful. Engineering is easier but more restricted because the definition of engineering is compromising to meet limitations: design has fewer limits and they are mostly created by your society within your own mind. A aesthetic sense will get you widespread respect, because people can appreciate it. Great engineering is a lonely vice that is usually not even appreciated by your fellow engineers. As an engineer you can subversively affect graphic design and you often have massive control over aesthetics. Comparatively, graphic designers are chained artists that often bleed away their soul slowly until they become corporate zombies with minds of mush.

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

#37

Post by rikroots »

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. Using the library people can set the colors of graphical objects or gradients using any CSS color space string (RGB, HSL, HWB, LAB, LCH) and the color should render as expected. The reduce-noise filter uses LAB internally to calculate color distances, but in the end I compromised and used euler distances for the algorithm rather than one of the more modern algorithms.

Work is still on a branch in the library[1] but I'm hoping to merge it into the main code in the next week or so (after testing across devices/screens/etc).

Aside: Safari has gone ahead and introduced support for HWB, LAB and LCH color strings in CSS. Sadly, they're not recognised by Safari's canvas engine (yet). Also, their HSL and HWB gradients seem to be the same as the RGB gradients; their LAB/LCH gradients seem to dodge the dreaded Gray Zone.

[1] - https://github.com/KaliedaRik/Scrawl-canvas/tree/dec-21-dith...

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

#39

Post by konschubert »

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…

There is also a third place to go where you respect good design, designers, and their work. You learn enough about it to enjoy it, but maybe not enough to do it well yourself. You accept that because you invest time in other things.

You can enjoy music without being a professional musician.

Post reply on HN