Simple CSS color management with SASS

Chris How-to, SASS, Web Design & Development 25

When I first got my CSS on (did I really just say that?) back in 2006, managing color values in my style sheet was pretty simple: I had my colors for text, and then my colors for elements with solid backgrounds, and that was about it. If I had my act together, maybe I’d write a comment at the top of my style sheet detailing the five or six hex values I was going to need, so I could refer to them as I coded.

And then CSS 3 happened. Gradients! Box shadows! rgba! Mother-effing hsl()! It was a wonderful time: Subtle color effects and variations that were previously the exclusive province of bitmapped background images were possible via straight up CSS. And as my designs in 2008 quickly filled up with drop shadows and gradients on everything humanly possible, I couldn’t help but notice that my style sheets were just as quickly filling up with all the color values I needed to support them. I’m sure this looks familiar:

background: rgb(157,213,58);
background: -moz-linear-gradient(top, rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1)));
background: -webkit-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%);
background: -o-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%);
background: -ms-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%);
background: linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%);

The new vendor prefixes weren’t helping much either. As someone who develops in Firefox, I couldn’t tell you the number of times I’d change, say, a color in the -moz-linear-gradient selector, and forget to make the same update to the webkit gradient. D’oh. Hope you Chrome and Safari users liked hot pink and purple together.

Since I started using SASS, however, I’m happy to report that I’ve been able to return to the halcyon days of only needing to use a handful of hex values in my style sheet. In fact, when I start a new project, I usually only need four. Here’s my workflow:

First: Create SASS variables for your basic colors

There’s no one-size-fits-all solution here, and obviously every project is different. However, I find that most apps and sites utilize four main colors: A brand color, an action color, a function color, and an alert color. (For the purposes of this post, we’ll use my best guesses at Facebook’s colors as an example.)

$brand-color: #3b5998;
$action-color: #67a54b;
$function-color: #f2f2f2;
$alert-color: #b22727;

Second: Lighten your load. Or darken it.

Once you’ve defined your basic colors, let SASS’s amazing lighten() and darken() functions create the tints for each.

$brand-color-light: lighten( $brand-color, 10% );
$brand-color-lighter: lighten( $brand-color, 20% );
$brand-color-dark: darken( $brand-color, 10% );
$brand-color-darker: darken( $brand-color, 20% );
 
etc., etc. for all your colors...

You’re going to want to tweak the percentages on a per-color basis here to get a nice gradation. (It should also be noted that SASS also has functions for dynamically adjusting a base color’s saturation, hue, and a whole bunch of other amazing stuff I feel like I haven’t scratched the surface of yet!)

Third: Set up your gradients, box shadows, etc.

Once you’ve got a whole bunch of nice tints for each of your base colors, setting up some mixins to use is pretty straightforward:

@mixin brand-gradient {
  background: url( imagefallback.png ) repeat-x $brand-color-darker;
  background: -moz-radial-gradient(center, ellipse cover, $brand-color 22%, $brand-color-darker 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(22%,$brand-color), color-stop(100%,$brand-color-darker));
  background: -webkit-radial-gradient(center, ellipse cover, $brand-color 22%,$brand-color-darker 100%);
  background: -o-radial-gradient(center, ellipse cover, $brand-color 22%,$brand-color-darker 100%);
  background: -ms-radial-gradient(center, ellipse cover, $brand-color 22%,$brand-color-darker 100%);
  background: radial-gradient(center, ellipse cover, $brand-color 22%,$brand-color-darker 100%);
}

… then simply rinse and repeat for all the gradients you’re going to need across your site or app:

But what about rgba and hsl?

Personally, I’m old school and tend to stick with hex values because they’re short and I’m used to ‘em. And when I do need rgba transparency, for example, SASS makes it easy for me to stay right within my comfort zone, as follows:

background: rgba( $brand-color, 0.5 );

Pretty cool.

The beauty of this approach is that I can change every single tint of a color sitewide by simply tweaking a single hex value. And by quarantining all this CSS in a separate colors.scss file, I no longer have all those gross, vendor-prefixed declarations cluttering up my main style sheet. So thanks, SASS, for simplifying my job and letting me color like it’s 2006 all over again. P.S. For the next release, if you could build something in to get me back the hair I’ve lost since 2006, that would be awesome. kthxbai.