Viewed: 12303

Using scale-color in Sass

Code in 2 minutes

I have been recently trying to get a consistent look across my element mixin no matter the colour, without being too inefficient. You could say simply take a base colour, and use darken and lighten on it, to get reasonable variations of the colour, for gradient colour stops. Then throw in some bevels, a border, and you have a nice button.

There comes a point where you’re thinking, the bevel could be less, the shadows are too intense for this colour. How do I solve this without the hassle of comparing if a colour is a certain saturation, lightness and so on. Difficult right?

Using scale-color

It isn’t difficult with scale-color. You pass your colour and adjust as needed with the $lightness and $saturation parameters (if need be and there are more parameters).

For example:

@include background(linear-gradient($color, scale-color($color, $lightness: -20%)));

It might be a little extra to type, but let me show you it’s worth it as scale-color changes colour differently. Here’s some examples.

Level it out

I have matched the colours best I can to demonstrate from a level point. Other examples will be using the same percentages to change the colour.

A red gradient using scale-colour.

@include background(linear-gradient(scale-color(#dd453d, $lightness: 50%), #dd453d, scale-color(#dd453d, $lightness: -50%)));

A red gradient using darken and lighten.

@include background(linear-gradient(lighten(#dd453d, 22.4%), #dd453d, darken(#dd453d, 28%)));

As you can see the difference in the values to achieve something that is identical. Now you may think that should work fine for any colour. Here are more examples why it won’t.

Example one

A green gradient using scale-colour.

@include background(linear-gradient(scale-color(#88a23d, $lightness: 50%), #88a23d, scale-color(#88a23d, $lightness: -50%)));

A green gradient using darken and lighten

@include background(linear-gradient(lighten(#88a23d, 22.4%), #88a23d, darken(#88a23d, 28%)));

Example two

A blue gradient using scale-colour.

@include background(linear-gradient(scale-color(#3a9ac9, $lightness: 50%), #3a9ac9, scale-color(#3a9ac9, $lightness: -50%)));

A blue gradient using darken and lighten.

@include background(linear-gradient(lighten(#3a9ac9, 22.4%), #dd453d, darken(#3a9ac9, 28%)));

Finishing comments

From the examples you’ll see their differences along the way from colour to colour. Comparing the examples which aren’t using scale-color you’ll notice while they may look fairly similar there is a slight difference. It becomes more apparent as you use more colours.

If you found this article useful, why not support the upkeep of this website?

Next to read

Compass mixins you should know about

Get the articles

It’s my aim to help you be a better designer. Join my monthlyish email list and I’ll send new tutorials to help you design & code beautiful websites.

I also do the occasional design critique, which you get access to for being a subscriber—send a design through after subscribing. Also, there’s some older templates and post files included. You can unsubscribe anytime.