30 ms·
CSS Gradients that avoid the “gray dead zone”
- gnabgib 5y agoSince 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 5y agoPersonally, 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 5y agoWell, 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 5y agoOh 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.com/css/make-beautiful-gradients/ https://web.archive.org/web/*/https://www.joshwcomeau.com/cs...
- theandrewbailey 5y agoIt would be convenient if gradient calculations would be hinted by the color space used to define the start/end colors.
- liuliu 5y agoBecause 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 5y agoIn 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 5y ago> 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!
- edoceo 5y agoFor Americans: it's football (the one with your hands) and measured in yards
- chrisseaton 5y agoAmerican football is called football because you play it on your feet, as opposed to on a horse.
- thaumasiotes 5y agoThis doesn't seem to be a very well-supported theory. https://en.wikipedia.org/wiki/Football#Etymology 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) 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.
- xibalba 5y agoI really, really like Mr. Comeau's "Me" avatar. In fact, his whole site is quite beautiful and pleasing.
- hwatkins 5y agoI 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 5y agoNo, 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?).
- marginalia_nu 5y agoI 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 5y agoI 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.
- udbhavs 5y agoCan 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.
- rco8786 5y agoEvery 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.
- eatonphil 5y agoThe 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/ https://www.joshwcomeau.com/gradient-generator/ [1] https://mycolor.space/gradient https://mycolor.space/gradient
- z3t4 5y agoI 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 5y agoAs 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 5y agoIt's always possible to convince yourself that you couldn't do something. But everyone that ever did achieve it only did so with practice.
- robocat 5y agoRed 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.
- dexwiz 5y agoLove 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).
- kevincox 5y agoIt 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 5y agoYeah I see that now. Having different parts be focusable versus clickable isn't a great choice imo.
- commandlinefan 5y agoGlad I wasn't the only one.
- dsmmcken 5y agoYeah, 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 5y agoI didn't even notice they were interactive.
- tvanantwerp 5y agoI 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 5y agoYour wish is granted by w3/css-color-4: § 12.1 Color space for interpolation https://www.w3.org/TR/css-color-4/#interpolation-space https://www.w3.org/TR/css-color-4/#interpolation-space
- azangru 5y agoThis was discussed on the http203 podcast: https://youtu.be/cGyLHxn16pE https://youtu.be/cGyLHxn16pE
- ketzo 5y agoAlways 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.
- arendtio 5y agoI enjoyed this one very much. Thanks for creating such high quality content.
- adtac 5y agoIs there a primer to colour spaces for a beginner?
- rikroots 5y agoThe 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/ https://www.w3.org/TR/css-color-4/
- alberth 5y agoFor 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)
- wnevets 5y agoits 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.
- hutzlibu 5y agoOr just go to the proper gradient generator. https://www.joshwcomeau.com/gradient-generator/ https://www.joshwcomeau.com/gradient-generator/
- AtNightWeCode 5y agoNice. 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.
- jrochkind1 5y agoThis 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?
- saralily 5y agoWhy are there two popovers in a row when paging through the page?
- ___q 5y agoSome uBlock filters to block them: ##[class*="ToastySubscribe" i] ##[class*="FloatingSidebar" i]
- quickthrower2 5y agoNo such thing as a free lunch.
- rikroots 5y agoJust 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-dither-filter https://github.com/KaliedaRik/Scrawl-canvas/tree/dec-21-dith...
- zamadatix 5y agoFirefox just released version 96 today and it comes with HWB() as well.
- rikroots 5y agoFollowing 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 https://scrawl-v8.rikweb.org.uk/demo/canvas-059.html [2] - https://scrawl-v8.rikweb.org.uk/demo/filters-027.html https://scrawl-v8.rikweb.org.uk/demo/filters-027.html
- pippy 5y agoI 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.
- mckoss 5y agoReally good videos on color spaces and gradients from Chrome Dev: https://youtu.be/cGyLHxn16pE https://youtu.be/cGyLHxn16pE https://youtu.be/Uh95jZPTDfw https://youtu.be/Uh95jZPTDfw
- Retr0id 5y agoI 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/ https://www.da.vidbuchanan.co.uk/widgets/css-gradient-fixer/
- jebronie 5y agoAwesome! I came to the comment section looking for something like this, after reading the article.
- hammock 5y agoWhat 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.
- deltron3030 5y agoThis is another cool tool: https://leonardocolor.io/ 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 5y agoIt’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 https://en.m.wikipedia.org/wiki/CIELAB_color_space
- deleted 5y ago[deleted]
- deleted 5y ago[deleted]
- deleted 5y ago[deleted]
- s1mon 5y agoLAB 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/ http://zschuessler.github.io/DeltaE/learn/ For a ton of useful equations and calculators: http://www.brucelindbloom.com/index.html http://www.brucelindbloom.com/index.html
- NelsonMinar 5y agoAs 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 https://github.com/w3c/csswg-drafts/issues/5833
- deleted 5y ago[deleted]
- warp 5y agoHTTP203 has two episodes on this which I found really helpful in understanding what color space related changes are being made in CSS and why they matter. - About gradients in particular: https://youtu.be/Uh95jZPTDfw?t=1111 https://youtu.be/Uh95jZPTDfw?t=1111 - Original episode about color spaces: https://youtu.be/cGyLHxn16pE https://youtu.be/cGyLHxn16pE
- PoopScript 5y agovery cool
- stu_k 5y agoThis 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!
- jrowen 5y agoThis 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.
- jahewson 5y agoI 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.
- mark-r 5y agoLAB is good but not great. If you do a gradient from pure green to pure blue, you'll see some purples and other color oddities in the mix.
- deleted 5y ago[deleted]
- steve_adams_86 5y agoI 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.
- peterisza 5y agoRelated video: https://www.youtube.com/watch?v=LKnqECcg6Gw https://www.youtube.com/watch?v=LKnqECcg6Gw
- marcan_42 5y agoThis needs to be higher up. It's not just about color interpolation - this is a problem with nonlinear color spaces. If you interpolate in a proper linear colorspace, you still get a desaturated color in the middle, but it's the proper brightness and it looks a lot better. Gamma correction is the bane of computer graphics, and in 2022 there is absolutely no excuse for not using linear colorspaces for all image processing. We have the RAM. 8-bit non-linear colorspaces are a compression technique and should be only used for file formats, not image processing, ever. So many things would look much better and correct if we stopped trying to incorrectly process images in a compressed representation without uncompressing them first. For comparison: nobody has used A-law or mu-law audio compression ever since digital POTS lines, and we certainly don't process audio in that form, ever. It's the same exact concept as storing pixel values in 8-bits with a gamma function. But somehow we think we can get away with processing images in that domain. I guess it's because if you try to do that with audio, the result is obviously wrong to any human ear, while if you try to do it with images it only looks somewhat wrong, not completely wrong...
- darepublic 5y agoNice little pop up with that clay figure -- actually clicked 'Yes' for once
- kristopolous 5y agoI 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/hsl%28%29 https://developer.mozilla.org/en-US/docs/Web/CSS/color_value... I'm in mobile. sorry for not investigating this myself
- kazinator 5y agoThere 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 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.
- ridaj 5y agoIf 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 https://news.ycombinator.com/item?id=20754364
- lwansbrough 5y agolab 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?
- deleted 5y ago[deleted]
- smagoun 5y agoThis 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/ 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.
- orbital-decay 5y agoThey aren't exactly novel, it's mostly an attempt to connect the modern color science with actual software development. Image processing in software (even that has the dominating market share like Photoshop) is still largely built around computing convenience, not around human perception or the mapping of physical world to it. Which is sad to see as the models are known for a long time but still mostly hidden in academic obscurity. I hope people like Björn Ottosson will help to change that.
- leni536 5y agoThe darkish gray dip is mostly avoided by using a linear colorspace. Interpolating in HSV can introduce weird artifacts. Mostly due to H being circular, if you naively interpolate between two close shade of red, you might go through all of the colors of the rainbow. Interpolaring in a perceptual colorspace might make sense in certain applications, but if arithmetic on color values is involved then a linear colorspace is a good default (and premultiplied alpha, but that's an other story).
- bugeats 5y ago> 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/ https://www.hsluv.org/
- makeworld 5y agoOr likely better, Okhsl and Okhsv: https://bottosson.github.io/posts/colorpicker/ https://bottosson.github.io/posts/colorpicker/
- skavi 5y agohttps://bottosson.github.io/misc/colorpicker/#738951 https://bottosson.github.io/misc/colorpicker/#738951 wow, the "Ok" family is clearly much better at modeling human perception.
- Ericson2314 5y agoThis should be the submission. Color is endlessly hard and OP is babysauce.
- user-the-name 5y agoSure, but that is often not as useful as it sounds. For instance, on your page, try to pick the most intense green using one of the Ok pickers. The edges of the physically representable colour space can be pretty important for many tasks.
- deleted 5y ago[deleted]
- jcun4128 5y agoHa that thing that moves on the side got me.
- scotty79 5y agoIs noone bothered that proposed gradient alternatives go through additional completely different colors?
- rangewookie 5y agoYeah... Is it really a 2-point gradient if it contains 5 different colors? The grey bugs me, but surely turning a gradient into a rainbow is not a solution. More like, an alternative.
- jebronie 5y agoNot really, it's just a gradient along the hue axis, instead of fading colors into each other. It's not more or less wrong than doing it the other way.
- Jerry2 5y agoSo, the "solution" for having a gradient go from yellow to a blue (via a gray region) is to have yellow go through green and then blue? Color me unimpressed. I remember years ago using non-linear functions to avoid a similar problem in a different field. I bet the same solution would work here and wouldn't look so "wrong". You could pick some non-linear fun to interpolate between values. And you could interpolate different RGB channels at an offset. The reult would be less gray in the middle.
- ireflect 5y agoThat's a poor take. The solution is to do linear interpolation in HSL instead of in RGB. It's a simple and useful insight and the article does a fantastic job explaining and motivating it. And then goes so far as to supply an interactive tool to try it out!
- Jerry2 5y agoIf you interpolate over H, you will always introduce other colors into your gradient.
- cush 5y agoBlue plus yellow makes green… What you’re describing would result in a yellow to blue gradient having green in the middle - at least that’s what would be interpreted by the human eye.
- aaron_m04 5y agoWhat gray zone?
- toastal 5y agoPersonally I've used SVGs and linear gradients to achieve a smooth gradient and blurs. I made a CodePen about blurs several year ago: https://codepen.io/toastal/pen/NAVybq https://codepen.io/toastal/pen/NAVybq
- deleted 5y ago[deleted]
- circlingthesun 5y agoThere 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 https://www.youtube.com/watch?v=LKnqECcg6Gw
- Asooka 5y agoIf you blend values in linear space, you'll linearly interpolate from the starting physical intensity to the ending physical intensity. This is a very reasonable default, corresponding to an objective physical measure. Also it makes your gradient appear roughly the same to people with reduced colour perception. Other modes would be useful too, maybe something that goes through HSB colour space, but I suspect designers would find it easier to design their desired gradient in a program of their choosing that then outputs a piecewise linear approximation.
- BeFlatXIII 5y agoThis is still an issue on iPhones today. When you have a notification icon and start to pull your Home Screen to make it blurry, the border of the red circle gets inexplicably dark. Whatever happened to Apple’s famed attention to detail. This has been the case since the iPhone 6 was new, if not earlier.
- bborud 5y agoThis is one of those things that has been at the edge of my attention for years, and when someone articulates and demonstrates it, I had an "aha! of course" reaction. :)
- mfbx9da4 5y agoWow! Subscribing to the newsletter was just such a delightful experience that I subscribed despite not wanting yet another newsletter.
- iLoveOncall 5y agoI find the article extremely dishonest as it goes from using a "yellow to blue gradient" (let's call that the initial requirement) and turns it into a supposedly better "yellow to orange to red to pink to purple to blue" gradient. I think anybody that has to choose between the "gray dead zone" and the "rainbow" will ALWAYS settle for the "gray dead zone" if the initial requirement is to make a "yellow to blue gradient". Does it contain valuable information? Yes. Does it avoid the "gray dead zone" problem? Not at all, unless you claim that bringing another problem magnitudes larger is "avoiding the problem".
- michaelgrafl 5y agoIt's also dishonest in the sense that gradients from bright yellow to bright blue or other combos that produce a grey deadzone are probably pretty hard to find in the wild. I've tried the gradient generator, and I found it actually a bit difficult to pick colors that produced a significant grey zone.
- monokai_nl 5y agoAs part of my logo generator I've spent quite some time to create a color algorithm that takes one color and create a gradient based on an intensity slider and a "mode". It proved quite useful, so I've implemented it as a free stand alone tool for web developers to quickly create aesthetically pleasing CSS gradients: https://mybrandnewlogo.com/color-gradient-generator https://mybrandnewlogo.com/color-gradient-generator
- r2222 5y agoYou can create multi-stop gradients easily with this tool, but doing so with pure blue and yellow looks nothing like the blend of those two colors would look. I think you should just pick colors that fit better together, unless the rainbow effect of walking along the hue angle is the effect you’re going for.
- arlburn 5y agoA great read. I do hope that people will try to incorporate this technique.
- jing247 5y ago
- eternityforest 5y agoThe 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.