Putting the FUN in Sass Color Functions

When I was still writing my CSS by hand, a common practice I had was to create a comment key at the top of the document to list out the font stacks and colors. It was my attempt to give direction to someone who might edit the CSS file later on.

Before:

/*
COLOR KEY:
  Background:     #DFEFFC
  Primary Blue:   #197CDB
  Primary Orange: #E39D12
/

So when I first started using Sass, a natural draw for me was variables. Variables are a terrific way to define and control common values throughout a project. By far my favorite and most frequent use of variables are for defining colors, so I can just plop something like $c-primary-color in my styles instead of trying to remember the hex or rgb value. Instead of having a key at the top of a CSS document, I now have a colors.scss that holds all my colors.

After:

// Site Colors
$c-bg-primary: #DFEFFC
$c-tx-primary: #197CDB
$c-tx-secondary: #E39D12

But a color doesn’t always appear the same in all circumstances. The perception of a color’s accuracy is affected by surrounding colors. For example, every instance of a yellow used in a design may not always be the same value. This may pose a problem if adjustments are needed on a variable color. If a variable is set for each slight color variation, the results could become tedious at best. Thankfully, Sass packs some powerful and useful functions to manipulate colors, and they can be applied to color variables.

There are several functions included in Sass for colors and more, but I’ll just cover a few I tend to use often.

Darken and Lighten

More often than not, I just need a shade or a highlight variation of a color. The Sass darken and lighten functions couldn’t be simpler. Just drop in the color variable in the appropriate function; then select the percentage to adjust.

darken($your_color,20%) lighten($your_color,20%)

SCSS:

$your_color: #db4e29;

.block1 {
    background: darken($your_color,20%);
}

.block2 {
    background: lighten($your_color,20%);
}

CSS:

.block1 {
    background: #872e17;
}

.block2 {
    background: #ea9680;
}

Mix Two Colors

From time to time while working with a design comp as a guide, I’ll come across a color that seems to be a solid color but ends up being a blend of two colors due to an opacity on the top color. Unless it makes sense to use an actual alpha channel, it’s probably best to use a solid color. Instead of whipping out an eyedropper and selecting the combined color from your graphics editor, use the Sass mix function.

mix($your_color,$another_color,20%)

The first part of the function is the overlay color, and the second is the background color. The number is the percentage of the first color to mix with the second color. A good way to think about the percentage is as the opacity of the first color. In the example, this would be the same as having the $your_color value with an opacity of 20% overlaying a background color of $another_color.

SCSS:

$your_color: #db4e29;
$another_color: #92e4bd;
div {
    background: mix($your_color,$another_color,20%);
}

CSS:

div {
    background: #99d5ae;
}

Add an Alpha Value to a Color Variable

Let’s say you actually do need an opacity added to the color instead of doing a mix. Maybe there is a colored block overlaying a photo background or something. With Sass, just wrap your color with rgba() and the opacity value as you would with normal CSS. Sass will take care of breaking down the color value into the correct RGB values.

rgba($your_color, .6)

Combine Functions

A useful aspect of these functions is that they can be combined in multiple ways to generate new colors. Using the functions we have already covered, a color could be created by mixing a darkened color with a lightened version of the same color.

mix(darken($your_color,20%),lighten($your_color,20%),50%)

Similarly, a mix could have darken applied to it.

darken(mix($your_color,$another_color,20%), 10%)

Conclusion

Although all these functions can be used without variables, the swappable attribute of variables is a distinct advantage. On down the road, if a red needs to change to a blue, all the places that red color variable is used with a function will be updated with the new blue color. So all the mix(), darken(), and lighten() functions will update with blue instead of red throughout the generated stylesheet.

These Sass color functions are wonderful tools to help aid design-decision while working in the browser, and they have an ease that challenges even the best graphics tools.