Ali Jafarian

The Web Project

I'm building a new online platform for learning web design and development. Check out the KickStarter to get early access and heavily discounted rates!

View the KickStarter


If you’ve ever used SASS (or LESS) you’ve probably explored the power of variables. Today we’re going to talk about a sustainable approach for color management using SASS.

First, let’s discuss why this is needed. Many websites and applications today use a good deal of color in their stylesheets. After all, color makes the world more exciting! With all this color comes a need for management and organization, especially for larger sites and apps. Otherwise you could find yourself in a mess of color – i.e. hundreds of hex values floating around with 10-20 different variations of one hue (ex: orange). This really happens, believe me. Especially when multiple designers are involved in a large scale projects.

By using SASS color variables, you’ll cut down on the time and overhead involved with color picking and management. It will change the way you code color in your stylesheets, and help the entire team work faster and more efficiently. Why? Because it relies on math, not human decision making. Let me elaborate…

Step 1: Define your Color Variables

First, let’s start off with a simple example of a SASS variable:

$green: #690;

This is assigning the hex value of #690 to a variable called $green. Pretty straightforward. Now I can use $green anywhere in my stylesheet that I would have normally used #690. More importantly, if I decide to change the color I only have to change it in one place, instead of manually changing every instance of #690 throughout the stylesheet.

Now let’s add a few more colors into the mix – we’ll run with a green/orange/purple tertiary color scheme:

$green: #690;
$orange: #f60;
$purple: #63c;

Step 2: Create Color Variations

In most cases, 3 colors just won’t cut it. So we’re going to create some light/dark variations of each color to give our site more color depth. To do this we’ll use the SASS lighten() and darken() methods. These are very helpful and powerful SASS tools, which I use throughout my projects for color variations, instead of manually picking lighter/darker hex values. Our updated color variables will look something like this:

$green: #690;
$green-light: lighten($green, 50%);
$green-dark: darken($green, 20%);

$orange: #f60;
$orange-light: lighten($orange, 50%);
$orange-dark: darken($orange 20%);

$purple: #63c;
$purple-light: lighten($purple, 50%);
$purple-dark: darken($purple, 20%);

Now I know what a lot of you are thinking – “Wait a second… that won’t work! My designers pick out the colors and send them to me. I can’t make decisions on what light green and dark purple are supposed to be!” If that’s the case, then use your designer’s color variations instead of my lighten/darken methods. However, you can use this article to explain to them that my method uses math, which is exact (ex: based on % difference of the same hue). There method uses human eye, which is subjective. Either way, we now have a nice color palette to use throughout our stylesheet.

Step 3: Defining your Descriptive Variables

Next, we’re going to create what I call “descriptive variables.” These are variables that represent UI guidelines or descriptions contextual to your project. For example – colors that relate to CTA’s (call-to-actions), or branding and marketing. These are used to keep consistency in your color usage, and they will reference some of the colors we’ve already defined. Example below:

/* color variables */
$green: #690;
$green-light: lighten($green, 50%);
$green-dark: darken($green, 20%);

$orange: #f60;
$orange-light: lighten($orange, 50%);
$orange-dark: darken($orange 20%);

$purple: #63c;
$purple-light: lighten($purple, 50%);
$purple-dark: darken($purple, 20%);

/* descriptive variables */
$color-brand: $green;
$color-primary: $orange;
$color-secondary: $purple;
$color-cta: $green;

Now we have variables that we can use throughout our stylesheet for things like links, headers, backgrounds, borders, etc. Below is an example of how these variables would play into your styles:

.header {
	background: $color-brand;
	height: 40px;
	padding: 10px 0;
	.header-brand {
		color: #fff;
		background: darken($color-brand, 15%); 
	}
}

.cta-button {
	display: inline-block;
	padding: 10px 20px;
	background: $color-cta;
	color: #fff;
	border: 2px solid lighten($color-cta, 15%);
	&.button-orange {
		background: $orange;
	}
	&.button-purple {
		background: $purple;
	}
}

.hero {
	background: $color-primary;
	width: 100%;
	padding: 100px 0;
}

Let’s say your boss comes in one day and says, “You know what, we should change our primary color to purple.” Instead of shaking your head in frustration because of the time it would take to update your non-variable stylesheet, you quickly reply with, “No problem!” All you have to do is change the $color-primary variable to $purple, which takes 5 seconds, and then every usage of $color-primary throughout the stylesheet updates. Then your boss gives you a raise because of how fast and organized you are :)

Conclusion

Color management may not seem like a huge problem for every project, especially smaller ones. However, this is a prime example of how tools like SASS and LESS can be leveraged to keep your CSS more organized and flexible. The same tactics I showed above can be used for fonts, margins, and anything else that relates to UI decision making. Give it a try. It will truly change the way you code!


  • iman kooshki

    Thank you brother,
    good job.

  • Dan

    I generally tend to put my colours into a pool at the top of my variables partial and pull them out for specific things e.g

    $color1: #000;
    $color2:#f00;
    $color3: #00f;

    //$col- lets me know its a color variable in my project files, though you could
    //omit it because your property should make this obvious

    $col-main-txt: $color1;
    $col-h1: $color2;
    $col-h1-border: $color3;

    Naming variables so specifically such as $green, $blue, $orange etc whilst it seems neat and tidy it doesn’t scale well when you need to make changes in the real world and you will need to make changes…the designer might not like the colours later on, the client might want last minute / ongoing changes during development, your boss might not like the colours and so on. Which can result in one being in a situation where you got $green in your properties but it actually outputs yellow. It’s not practical to say $green, $red, $purple, $blue, $orange for every variation of colour there is.

    Doing it as above means you only ever have to make changes in your variables file. You don’t have to hunt around for $green and change it to $blue you just change $col-h1: $color2 to $color1 for example. I’ve been doing it like this for years now and its always held up even on a bit team becuase its fairly obvious whats going on. As I say you literally only have to manage the values of your variables in one file…simple :)

    • Hey Dan,

      Thanks for the feedback! I actually agree with you, sir. Which is why I showed in my example the $color-brand, $color-primary, etc. variables. These are essentially the same thing as your $color1, $color2, etc. variables. They end up referencing one of the $color variables, so I can make quick changes like you highlighted. I just prefer to add an additional layer of variable to keep my color management more organized :)

      Thanks for sharing!