Colour Variables in Sass

Author: Daniel Alcorn

We work with sass everyday so I thought I’d share a little snippet of framework that I tend to use with each project. It sits in a base sass file and, with a few minutes tweaking at the start of a project, I have a palette of colours ready to roll.

Brand Colours

$primary: #D95B43;
$secondary: #EBD077; 
$tertiary: #54777B;
$highlight: #542537;
$primary-darker: darken($primary, 5%);
$secondary-darker: darken($secondary, 5%);
$tertiary-darker: darken($tertiary, 5%);
$highlight-darker: darken($highlight, 5%);

With brand colours I’ve tended to avoid a list of variables with specific descriptions such as ‘brand-blue, brand-red’ etc as these can change from project to project. By using ‘primary, secondary, and tertiary’, I can use these variables throughout my stylesheet and, by updating the hex value right within the variable, the changes filter down immediately. This means headings, links, borders etc that you might use for default elements in a site update instantly.

If a brand has a particularly large set of brand colours it’s usually essential to go into more specific variables but I often find the average site tends to only use a few brand specific colours.

The second layer to this section is variables for darker versions of the main colours for use on rollovers or other elements (useful little thing that).

 

White/Black

$white: #ffffff;
$black: #000000;
$off-white: #f2f2f2;
$off-black: #1a1a1a;

Next is white, black and monochrome variables. It’s not really necessary to create a white and black variable as it’s something that is never going to change and is easy to remember and write. I however, find it easier to type ‘$white’ as I’m used to writing colours in this form and it’s just as quick to write that than ‘#ffffff’. I then like to have an off-white and off-black value for the more subtle elements.

 

Greyscale

$lightestgrey: #e6e6e6;
$lightergrey: #cccccc;
$lightgrey: #b3b3b3;
$grey: #999999;
$darkgrey: #808080;
$darkergrey: #666666;
$darkestgrey: #4d4d4d;

Then I have my list of greys. Again, I could create a longer list that would give me more flexibility such as ‘$black-10, $black-20, $black-30’ but I find I don’t tend to use many more greys than the ones above as it’s easy to lose track. This structure also means I can adjust the warmth or coolness of the grey by just updating the hex  again, removing the need to change variable names further down the stylesheet.

 

Cool Grey/Warm Grey

$cool-grey-light: #ECF0F1;
$cool-grey: #BDC3C7;
$cool-grey-dark: #95A5A6;

$warm-grey-light: #E9E0E0;
$warm-grey: #D0C7C7;
$warm-grey-dark: #B8AEAE;

These are a set I’ve used more recently when I’ve wanted to keep my traditional grey scale but create a different feel to certain elements by using a cool or a warm grey. These tend to work well as background colours on blocks of content when you want to subtly differentiate between blocks.

 

User Notification Colours

$success: #5cb85c;
$warning: #f0ad4e;
$error: #d9534f;

These variables are useful for forms and other elements where it’s important to alert a user that a process has been successful or not. Red, orange and green – you could change them away from the traffic light colours… but that would be weird.

 

Social Colours

$twitter: #00aced;
$facebook: #3b5998;
$linkedin: #007bb6;
$youtube: #bb0000;
$tumblr: #32506d;
$instagram: #517fa4;
$vimeo: #aad450;
$lastfm: #D51007;

Lastly, I keep a bank of social media colours in my variables list as these are always needed in a project and I’d had enough of scrabbling round the internet to find the hex values for twitter for the 17th time to style a button. Whenever I come across a new colour I need, I add it the list.

 

I’m far from an expert when it comes to Sass and frameworks and am always learning a better way of doing something with every new project. This is a framework that I’ve developed from my experiences and it seems to work for my needs. I hope you find it useful too.