Use Sass to Extend Your Brand Color Palette

So the Art Director you’re working with hands you a brand guide with a color palette consisting of 4 colors. They look great, but what if you need additional colors for darker strokes around buttons, gradients, and maybe some alpha transparency? You don’t want to introduce foreign colors to the palette for fear of straying from brand standard, but you do need to add a little depth and variation. What can you do?

Why not base these additional colors, mathematically, off the original brand palette? This is where Sass pre-processing comes into play.

What the heck is Sass?

Sass is basically a short-hand for CSS that allows you to use simple variables, math equations and powerful functions called “mixins” to generate valid CSS for use in your project.

If you’ve never used it before (and you use OSX), I highly recommend checking out CodeKit. It has a built-in Sass compiler, and is easier than compiling Sass via command line. Sass is also very useful for quickly importing many CSS files and combining them into one file — resulting in only a single HTTP request and ultimately speeding up the performance of your website.

Below are a few ways to extend your color palette using only your brand palette, Sass color variables and some basic Sass color functions:

Let’s create variables from hex values selected by an Art Director

Brand Colors

brand_colors

$brand-blue: #005696;
$brand-orange: #fd9902;
$brand-cyan: #4ba1cc;
$brand-purple: #6c0d9b;

By naming your colors using Sass variables, you’re also developing nomenclature you and your colleagues can use when discussing the project.

Let’s extend that brand palette using some basic Sass color functions

Darkened Cyan

blue_darken

$brand-cyan-dark-0: darken($brand-cyan, 0%);
$brand-cyan-dark-10: darken($brand-cyan, 10%);
$brand-cyan-dark-20: darken($brand-cyan, 20%);
$brand-cyan-dark-30: darken($brand-cyan, 30%);
$brand-cyan-dark-40: darken($brand-cyan, 40%);
$brand-cyan-dark-50: darken($brand-cyan, 50%);

Lightened Purple

purple_lighten

$brand-purple-light-0: lighten($brand-purple, 0%);
$brand-purple-light-10: lighten($brand-purple, 10%);
$brand-purple-light-20: lighten($brand-purple, 20%);
$brand-purple-light-30: lighten($brand-purple, 30%);
$brand-purple-light-40: lighten($brand-purple, 40%);
$brand-purple-light-50: lighten($brand-purple, 50%);

Desaturated Orange

orange_desaturate

$brand-orange-desaturate-0: desaturate($brand-orange, 0%);
$brand-orange-desaturate-10: desaturate($brand-orange, 10%);
$brand-orange-desaturate-20: desaturate($brand-orange, 20%);
$brand-orange-desaturate-30: desaturate($brand-orange, 30%);
$brand-orange-desaturate-40: desaturate($brand-orange, 40%);
$brand-orange-desaturate-50: desaturate($brand-orange, 50%);

Transparent Blue

blue_transparency_v3

$brand-blue-transparent-0: rgba($brand-blue, 0%);
$brand-blue-transparent-10: rgba($brand-blue, 10%);
$brand-blue-transparent-20: rgba($brand-blue, 20%);
$brand-blue-transparent-30: rgba($brand-blue, 30%);
$brand-blue-transparent-40: rgba($brand-blue, 40%);
$brand-blue-transparent-50: rgba($brand-blue, 50%);

You can even create a variable derived from another variable

Saturated Grey

grey_saturate

$black: #000;
$grey-1: lighten($black, 75%);
$grey-1-saturate-10: saturate($grey-1, 10%);
$grey-1-saturate-20: saturate($grey-1, 20%);
$grey-1-saturate-30: saturate($grey-1, 30%);
$grey-1-saturate-40: saturate($grey-1, 40%);
$grey-1-saturate-50: saturate($grey-1, 50%);

For a more in-depth usage check out this demo I created over at JSFiddle.net.

Using AI to develop and debug code

Media & Technology

Is CSS Flexbox ready for prime time yet?

Jigsaw & Work