Viewed: 4381

Using Sass to create harmonious gradients

Code in 2 minutes

One of the best things about Sass is the ability to adjust colour nicely and be able to apply that, consistently across, many colours.

In this post, I’m going to demonstrate, as I have in the past with scale-color. How you can create gradients, that look much more harmonious. Instead of the standard, take the colour and darken it. Using adjust-hue and scale-color, we can achieve this.

Why adjust the hue?

Adjusting hue over lightness allows for a perceived shift in lightness. So the transition between colour is there, but aesthetically they are much nicer.

While just darkening it isn’t the worst thing and can be the right choice. This method is an alternative approach to creating gradients.


Each of these examples the gradient to the right is the harmonious one. Although I would hope this is obvious!

Blue example

See the Pen oXPLZW by Steve (@stevemckinney) on CodePen.

Green example

See the Pen JdaKWb by Steve (@stevemckinney) on CodePen.

Red example

See the Pen EjeyWK by Steve (@stevemckinney) on CodePen.


Here are some of the things I encounter when using this method.

Flip the gradient

Sometimes your starting colour can look wrong. Flip the gradient. This is particularly the case with red.

Use scale-color to darken

You can improve how they appear by using scale-color to darken. Instead of only darkening, we can adjust-hue and scale-color. You will find gradients feel less ‘muddy’/‘dirty’.

YIQ colour model

Although the colours may be of a similar saturation and hue. Our eyes are more sensitive to colour changes, in some, more than others.

Colours on the orange to blue range are the ones our eyes are most sensitive to. So the amount of hue we will need to adjust these by will be smaller. Up to 30 degrees will generally be more than enough. Colours on the purple to green range our eyes are least sensitive to, so the adjustment it will need to be more.

Having a brief understanding of the YIQ colour model we can understand how our eyes perceive colour better. Understanding this further can help with automating the process within Sass. By having a rough idea how the colour will react to having its hue adjusted.

Hopefully this helps

I find this technique great for creating nicer, less muddy looking gradients.

If you found this article useful or it’s saved you time, I would be grateful for your support.

Next to read

Using scale-color in Sass

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner, every time.

Join my monthlyish email list and I’ll send you the template and new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.