A quick primer on why gradients suck sometimes
Eliminating the muddy grey/brown areas because conventional colour spaces aren’t perceptually uniform
Most of us learn to mix colours together with paint, slopping together combinations of red, yellow, and blue to make other colours of the rainbow, and eventually slopping enough of them together to produce all kinds of mud.
Designers who deal with print will inevitably turn around to using the CMYK colour model, a grown-up version which refers to the 4 ink plates used to produce layers of a print in cyan, magenta, yellow, and black. Because one colour basically masks out another as they are combined, this model is known as subtractive. A Risograph printer can accomplish a similar process but with easily interchanged inks for really dreamy results.
A page from the The Colour Library: Risographic Printing Guide book shows how pink, blue and orange combine.
On screens, additive models are used where the three primaries of light (red, green, and blue) are combined to display 16 million different colours. The results are different from what you would get by combining the same colors using paint: mixing maximum values of red, green, and blue together gives you white in the RGB colour space.
What. (From Wikipedia)
A colour space is the way in which a colour in a model is displayed to us, and RGB is often depicted either as a cube or a fin-shaped curve on a 2D plane. When we create gradients, we’re drawing a path from one point in a colour space to another, but the math isn’t always pretty when we do this in the RGB space. We often cross over from one vibrant colour through some mud and into our second vibrant colour.
The quickest way to fix this is to add another gradient stop where the colour is dull.
The quick fix: same two colours on each end, but the grey has been replaced with a more vibrant one.
To get technical, different colour spaces will produce different gradients. There are a few hue-based colour spaces (HSB, HSL, and LCH) that will interpolate between gradient stops without crossing through grey-ish/brown-ish territory. LCH (luminance, chroma, and hue) is the smoothest one because the colour space is perceptually uniform. In other words, the math is mathed to closely resemble how human eyes perceive colour. The smoothness is illustrated really well here in this demo.
Since support in common design tools for newer colour spaces like LCH is sparse (but improving), I rely on online tools to find the perfect vividness that I’m looking for in a gradient.
These are my two favourites:
Colour in product design is only getting better, and with advances like new colour spaces, tools, and improvements like the wide-gamut P3 developed by Apple, I wonder if we’ll be able to design products for mantis shrimps one day.