Using scale-color in Sass

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.

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

Example two

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.