[HN Gopher] CSS Gradients that avoid the "gray dead zone"
___________________________________________________________________
CSS Gradients that avoid the "gray dead zone"
Author : joshwcomeau
Score : 496 points
Date : 2022-01-11 17:32 UTC (5 hours ago)
(HTM) web link (www.joshwcomeau.com)
(TXT) w3m dump (www.joshwcomeau.com)
| arendtio wrote:
| I enjoyed this one very much. Thanks for creating such high
| quality content.
| AtNightWeCode wrote:
| Nice. Things ending up being gray is a common problem on the web.
|
| I took a deep dive into gradients some time ago. Not CSS but
| custom calculations that evened out things like brightness,
| luminescence, contrast and so on. My key takeaway was that my
| preferred way of doing gradients was to use similar hues and also
| play around with the saturation of the colors. One does not need
| complimentary colors to get that gradient feel.
| kazinator wrote:
| There are more colors spaces than just HSV and RGB.
|
| The HSV gradients look wonky; the HSV space was designed for easy
| color picking UI with efficient calculations on 1980's hardware,
| not for interpolation.
|
| I found this site where you can play with interpolation via
| various color spaces:
|
| https://colordesigner.io/gradient-generator
|
| LAB looks good; but interestingly, going from yellow to blue, it
| doesn't interpolate through green at all. Which makes sense,
| since yellow-blue is one axis in LAB, whereas red-green is
| another.
| dexwiz wrote:
| 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).
| commandlinefan wrote:
| Glad I wasn't the only one.
| kevincox wrote:
| 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.
| dexwiz wrote:
| Yeah I see that now. Having different parts be focusable
| versus clickable isn't a great choice imo.
| dsmmcken wrote:
| 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.
| LinAGKar wrote:
| I didn't even notice they were interactive.
| peterisza wrote:
| Related video: https://www.youtube.com/watch?v=LKnqECcg6Gw
| tvanantwerp wrote:
| 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.
| floatingatoll wrote:
| Your wish is granted by w3/css-color-4:
|
| SS 12.1 _Color space for interpolation_
| https://www.w3.org/TR/css-color-4/#interpolation-space
| NelsonMinar wrote:
| As the article says, the core problem is CSS interpolates in RGB
| colorspace. CSS Color 4 seems to have adapted a color space
| parameter for interpolation in its drafts. See discussion here:
| https://github.com/w3c/csswg-drafts/issues/5833
| smagoun wrote:
| 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.
| mckoss wrote:
| Really good videos on color spaces and gradients from Chrome Dev:
|
| https://youtu.be/cGyLHxn16pE https://youtu.be/Uh95jZPTDfw
| jrochkind1 wrote:
| This discussion thread already has an unusual number of posts
| specifically praising the author by name. It's very weird and
| unusual on HN. But he's just a really popular guy?
| kristopolous wrote:
| I might be missing something but what happens when you do it with
| the already supported HSL (for well over a decade)
|
| https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
|
| I'm in mobile. sorry for not investigating this myself
| theandrewbailey wrote:
| It would be convenient if gradient calculations would be hinted
| by the color space used to define the start/end colors.
| eatonphil wrote:
| The gradient generator Josh introduces here is pretty nice [0]!
| And the HSL vs RGB theory is also pretty interesting. I'll give
| this generator a try next time I want one.
|
| But my favorite gradient generator at the moment (most pleasant
| gradients IMO) is still [1].
|
| [0] https://www.joshwcomeau.com/gradient-generator/
|
| [1] https://mycolor.space/gradient
| z3t4 wrote:
| I like [0] better as it gives you faster feedback. My only
| complain is that the web-app background is a png (should be
| gradients).
| Trufa wrote:
| 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!
| recursive wrote:
| It's always possible to convince yourself that you couldn't do
| something.
|
| But everyone that ever did achieve it only did so with
| practice.
| Dove wrote:
| I can recommend The Non-Designer's Design Book, by Robin
| Williams, as a great way to dip a toe into the world of design.
| It won't make you a designer, but it will help you fake it a
| bit when you don't have one. I found the suggestions
| surprisingly effective in my own work.
| robocat wrote:
| 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.
| karaterobot wrote:
| > As an engineer you can subversively affect graphic design
| and you often have massive control over aesthetics.
|
| For most of my career I was a hybrid designer/developer.
| There's definitely a dialog between them, and engineering
| enables and constrains some elements of the esthetics, but in
| general I would say it works the other direction more often
| than not.
|
| That's why when I read about _von Tiesenhausen's Law of
| Engineering Design_ , it really rang true for me: "If you
| want to have a maximum effect on the design of a new
| engineering system, learn to draw. Engineers always wind up
| designing the vehicle to look like the initial artist's
| concept."
|
| We're just talking about esthetics, rather than functionality
| or purpose or process, which are much more of a give-and-
| take.
|
| This is why I eventually just moved straight over to design:
| so much of product development is path-dependent, and
| designers exert a ton of leverage just by creating documents
| upstream of engineers.
| udbhavs wrote:
| For all the hate Apple gets, they definitely took the red
| pill when it comes to UI/UX.
| Sohcahtoa82 wrote:
| Some pieces are great, but others are infuriating, like the
| fact that I can't disable pointer or scroll wheel
| acceleration without installing 3rd party software.
|
| At least they let me invert the scroll wheel so that its
| behavior matches everything else in the world.
| mlyle wrote:
| > At least they let me invert the scroll wheel so that
| its behavior matches everything else in the world.
|
| Everything else in the world has largely inverted, too :P
| egypturnash wrote:
| 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.
| konschubert wrote:
| 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.
| hammock wrote:
| 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.
| [deleted]
| s1mon wrote:
| 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 ton of useful equations and calculators:
| http://www.brucelindbloom.com/index.html
| deltron3030 wrote:
| This is another cool tool: https://leonardocolor.io/
|
| You can compare monochromatic scales between various color
| space interpolations and order them by contrast (great for
| accessibility work). Lab is from the 70s, the newest one there
| is CIECAM2 from the 2000s, also looking most natural to my
| eyes.
| burticlies wrote:
| 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
| [deleted]
| [deleted]
| xibalba wrote:
| I really, really like Mr. Comeau's "Me" avatar. In fact, his
| whole site is quite beautiful and pleasing.
| hwatkins wrote:
| 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.
| gwern wrote:
| 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?).
| udbhavs wrote:
| 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.
| Retr0id wrote:
| HN
| ulimn wrote:
| For me Page Down does not trigger the click on the "Sure"
| button of the small popup. That would be a really weird
| thing. Space does, because the element is focused
| automatically (which is kinda bad imo).
| marginalia_nu wrote:
| I seriously wonder if a person exists that likes being
| bothered when they're trying to read something? If that's
| not the case, and in fact nobody likes this, why anyone
| would think that this was a good idea?
| ulimn wrote:
| I personally don't find this particular popup bothering.
| I can continue to read the page without interruption. I
| also understand that they want me to subscribe or
| whatever so I know when their next article is up.
| Aardwolf wrote:
| Heh, I didn't like it, I never like when something pops up
| and animates on a website after a timer while you're reading,
| I never like when something overlays any part left or right
| of the text you're trying to read, and I never like when you
| have to close something to continue distraction free. This
| thing is exactly an aggressive modal popup.
| strken wrote:
| When it showed up, I gasped and jerked my hands away from the
| keyboard. It felt like a jump scare.
| jtvjan wrote:
| I like how the little w and Ren make a big W in negative
| space.
| jrowen wrote:
| 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 choosing your start
| and end (and optionally intermediate) colors.
| [deleted]
| steve_adams_86 wrote:
| 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.
| jahewson wrote:
| I agree that hue rotation makes for some weird gradients.
| Linear RGB is an acceptable color space for gradients, because
| gamma correction is accounted for. But performing a linear
| interpolation in sRGB or the like leads to a linear gradient
| which appears to ramp steeply from one color stop to the next.
| However, if you compare Linear RGB with CIELAB then you'll
| notice the same thing, the CIELAB gradients look smoother as
| linear movement through the color space more closely mirrors
| linear movement through our human perceptual system.
| darepublic wrote:
| Nice little pop up with that clay figure -- actually clicked
| 'Yes' for once
| gnabgib wrote:
| Since this is posted by you, Josh.. is the date in the article
| inaccurate (should the year be 2022?) or did you just decided to
| push to HN on the one year anniversary? (Title might benefit from
| the year)
| eatonphil wrote:
| Personally, when it's so recent (like within last year or
| three) I don't really care if the title is missing the year on
| HN. It becomes more useful when it's clearly a dated (i.e.
| maybe incorrect or no longer relevant) article.
| gnabgib wrote:
| Well, I reckon it's a typo rather than an old article.. I
| can't believe that a joshwcomeau.com article would only have
| 2000 visits in a year, and most of us type/write/speak the
| wrong year in early January :D
| eatonphil wrote:
| Oh yeah could be. It doesn't show up on archive.org [0]
| before today which might further agree with you.
|
| [0] https://web.archive.org/web/*/https://www.joshwcomeau.c
| om/cs...
| rco8786 wrote:
| Every once in a while you come across something on the internet
| that makes you stop and go "whoa, that is cool". This is one of
| those for me.
| jtth wrote:
| Why are there two popovers in a row when paging through the page?
| ___q wrote:
| Some uBlock filters to block them:
| ##[class*="ToastySubscribe" i]
| ##[class*="FloatingSidebar" i]
| PoopScript wrote:
| very cool
| lwansbrough wrote:
| lab looks best IMO. Safari supports lab in CSS, but I don't have
| a way to test: do linear-gradients in Safari where lab is the
| colour space used for the two colours, does it do the gradient in
| lab colour space?
| rikroots wrote:
| 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...
| pippy wrote:
| 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.
| SpectralName wrote:
| 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
| pippy wrote:
| 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.
| zamadatix wrote:
| Firefox just released version 96 today and it comes with HWB()
| as well.
| azangru wrote:
| This was discussed on the http203 podcast:
| https://youtu.be/cGyLHxn16pE
| stu_k wrote:
| This also addresses an issue when you transition from black to
| transparent to emulate a shadow, and end up with a "cliff" where
| the gradient abruptly changes. You can see this in the tool when
| you transition from black to white with LRGB. Any of the other
| color spaces avoid it. Very cool!
| adtac wrote:
| Is there a primer to colour spaces for a beginner?
| rikroots wrote:
| The W3C CSS Color Module Level 4 working draft[1] has a useful,
| if brief, overview before it ploughs into implementation
| details.
|
| [1] - https://www.w3.org/TR/css-color-4/
| ridaj wrote:
| If we're going to think about gradients at that level, we should
| also think about perceptual nonlinearities that create all kinds
| of distracting visual artifacts... See e.g.
| https://news.ycombinator.com/item?id=20754364
| [deleted]
| alberth wrote:
| 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)
| hutzlibu wrote:
| Or just go to the proper gradient generator.
|
| https://www.joshwcomeau.com/gradient-generator/
| wnevets wrote:
| its in the site's defense there is a note that says
|
| > How to use: Click and drag within the color gradient, or
| focus the color square and use the left/right arrow keys.
| Retr0id wrote:
| I made a less-polished version of this too, although mine uses
| the Oklab colourspace for interpolation:
|
| https://www.da.vidbuchanan.co.uk/widgets/css-gradient-fixer/
| jebronie wrote:
| Awesome! I came to the comment section looking for something
| like this, after reading the article.
| ketzo wrote:
| Always psyched to see a post from josh.
|
| Really insightful deep dives into a _very_ misunderstood
| technology, presented with a fun, lighthearted writing style that
| I find myself trying to emulate in my own technical writing.
| liuliu wrote:
| 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.
| riidom wrote:
| In GIMP, there are beside clockwise and counter-clockwise two
| more options, near and far, which map to cw or ccw depending on
| start- and end-hue.
| red_trumpet wrote:
| > 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!
| andai wrote:
| 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?)
| edoceo wrote:
| For Americans: it's football (the one with your hands) and
| measured in yards
| chrisseaton wrote:
| American football is called football because you play it on
| your feet, as opposed to on a horse.
| thaumasiotes wrote:
| 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 explanation.
|
| https://en.wikipedia.org/wiki/Football_(word)
|
| > In some cases, the word has been applied to games which
| involved carrying a ball and specifically banned kicking.
| For example, the English writer William Hone, writing in
| 1825 or 1826, quotes the social commentator Sir Frederick
| Morton Eden, regarding a game - which Hone refers to as
| "Foot-Ball" - played in the parish of Scone, Perthshire
| [in which kicking the ball was prohibited]
|
| > Conversely, in 1363, King Edward III of England issued
| a proclamation banning "...handball, football, or hockey;
| coursing and cock-fighting, or other such idle games",
| suggesting that "football" was in fact being
| differentiated from games that involved other parts of
| the body.
|
| It seems unlikely that King Edward III meant to ban games
| that involved walking on your hands, or perhaps
| brachiating.
| chrisseaton wrote:
| > 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.
___________________________________________________________________
(page generated 2022-01-11 23:00 UTC)