The Sass preprocessor for CSS offers a few built-in color utilities but in addition to these default helpers I always use a few custom functions that are handy whether it’s for prototyping user interface elements, integrating design comps or making color themes. In this article I’ll explain the four functions that I always copy and paste when starting a new project with Sass.

Mixing colors

The Sass preprocessor offers a mix() color function out of the box that returns a blend of two colors.

mix($color1, $color2, $weight: 50%);  

When the $weight is 0% this function returns the same color as $color1 and with 100% it returns the same color as $color2. The default 50% value is a balanced mix between the two colors.

.element {
    background: mix(#e03131, #1b6ec2); // red + blue
}

Will generate after the Sass compilation:

.element {
    background: #7e507a; // purple
}

On this image I’m mixing a base #5590BF blue color with percentages of white on the first line and percentages of black on the second line.

Tint and shade

The tint() and shade() color functions used to be available as built-in functions in older versions of Sass when it was written in Ruby. But with the actual LibSass versions written in C++ we must implement them as Sass functions.

  • A tint is made by mixing a color with white.
  • A shade is made by mixing a color with black.

With these implementations I’m adding an optional parameter to give the computed color an opacity.

// Return a lighter color
// 0% is the same color, 100% is white
@function tint($color, $percent: 0%, $alpha: 1) {
    @return rgba(mix(white, $color, $percent), $alpha);
}
// Return a darker color
// 0% is the same color, 100% is black
@function shade($color, $percent: 0%, $alpha: 1) {
    @return rgba(mix(black, $color, $percent), $alpha);
}

Designing a button

With the tint function I’m adding a slight effect of depth with a gradient from the top to the bottom of the button. And with the shade function I’m adding a darker border. The HTML structure is really simple:

<a href="#" class="button">This is a button link</a>  

The interesting part is the styling with Sass thanks to the tint() and shade() functions, and the black() function I’m going to talk about in the next section:

$color-example: #1098ad;

.button {
    display: inline-block;
    padding: .5em 1.25em;
    color: white;
    background: linear-gradient(tint($color-example, 10%), $color-example);
    background-color: $color-example; // flat color on older browsers
    border: .08em solid shade($color-example, 8%);
    border-radius: .1em;
    text-decoration: none;
    box-shadow: 0 .1em .5em black(80%, .2);
    transition: border-color .3s;

    &:hover {
        // Darker border on hover.
        border-color: shade($color-example, 50%);
    }
}

The button has a subtle shadow effect and a slightly darker border. On hover the border is even darker.

Black, grays, white and off-white

I also find it useful to have two other helper functions, white() and black() to generate different values of gray by mixing white with black in one direction or the other.

// Return an intensity of white
// 0% is black, 50% is a middle gray, 100% is white
@function white($percent: 100%, $alpha: 1) {
    @return rgba(mix(white, black, $percent), $alpha);
}
// Return an intensity of black
// 0% is white, 50% is a middle gray, 100% is black
@function black($percent: 100%, $alpha: 1) {
    @return rgba(mix(black, white, $percent), $alpha);
}

Choosing an off-white background

When making a color palette it’s important to choose an off-white color for backgrounds for example. This off-white is almost white but offers a better readability than black text on a pure white background.

body {  
    background: black(5%);
}

Using a softer off-white background

To improve readability further we can use a warmer off-white. Almost a sepia background. Let’s mix 10% of the orange color with the previous gray color:

body {  
    background: mix(orange, black(5%), 5%);
}

Such a background reduces eyestrain when reading long texts on screen. That’s why browsers like Firefox or Edge offer an option to display a sepia background while in reading mode. Here I’ve added an orange color but it’s possible to use another warm hue between yellow and red depending on the effect we want to achieve.

Here’s a screenshot of the off-white sepia background in the reading mode of Firefox.

Demo

Here’s a quick demo of the various colors and effects that can be used with these helper functions. The demo is here on CodePen.

See the Pen Color Helper Functions in Sass by Frederic Perrin (@blustemy) on CodePen.