55 Minutes

Welcome to the 55 Minutes blog.
55 Minutes is a web development consultancy in San Francisco building apps for design-led businesses and startups. On this blog we discuss the technology tools of our trade: Ruby on Rails, Django, Sass, OS X, and more.

Color Management for People Who Write Markup

In which I explain my workflow for managing color palettes in a web project.

How do you keep track of the colors you use in a web project? How do you organize them so you always have easy access to the color codes you need when you’re writing CSS? There are many ways to do so, but for a long time, I maintained a text file that correlated color names to hex values, so I would always have an easy place to copy the color codes from. Now, this was useful, but based on just a code and a name, I didn’t have a good understanding of what a color was. Clearly I needed some kind of visual swatch collection, in addition to a list of color names and codes.

For a while after that, I used a color workflow application called Tangerine, which, while it had its problems (you couldn’t sort palettes!), really saved me time when coding; with a single click, I could copy colors back and forth to Photoshop or my text editor. Pretty awesome. Unfortunately, Tangerine became abandonware shortly thereafter, so I was out of luck.

After some experimentation, I switched to a more complicated but more robust method, of using Mac OS X’s built-in color picker and a few useful plugins:

Now, this is quite useful, but doesn’t really solve all my color problems. In the early days of a project, it’s quite common, for my team at least, to change or replace color schemes. Every time we do, I have to go through any of the CSS I’ve already written and do a global search-and-replace. This becomes very tedious very quickly, and before Sass and Compass came along, there wasn’t really a good solution to the problem.

Sass and Compass have changed the game; by taking advantage of Sass' variable substitution feature as well as the judicious application of a layer of abstraction, now I can change a few lines of code in one file and my application will automagically get a new color scheme.

By way of example, say that I have a set of Sass variables for my colors:

$old-copper   : #6f452b;
$tuscany      : #c8653a;
$hurricane    : #94847c;
$bone         : #e5dbc7;
$pattens-blue : #dde7f3;
$rain-forest  : #696f2b;
$lochinvar    : #46948d;
$jacarta      : #4b2b6f;
$fire         : #8a3528;
$azure        : #37649b;
color-management-01.scss – View Gist

I could use them like so:

a
{
  color: $lochinvar;
}

a:visited
{
  color: $jacarta;
}

a:hover, a:active
{
  color: darken($lochinvar, 10);
}
color-management-02.scss – View Gist

That definitely saves me from having to remember the hex codes and copy-and- paste them everywhere, but if I need to change the color schemes, I’m still changing code in multiple places: I have to add a new color name and its hex code, and change all my styles to use those new color names. Close, but no cigar.

But say I added a layer of abstraction, like so:

$link         : $lochinvar;
$visited-link : $jacarta;
$active-link  : darken($lochinvar, 10);
color-management-03.scss – View Gist

Then I could do this in my code:

a
{
  color: $link;
}

a:visited
{
  color: $visited-link;
}

a:hover, a:active
{
  color: $active-link;
}
color-management-04.scss – View Gist

And any time I need to switch colors, all I need to do is change the values of $link, $visited-link and $active-link. The bulk of my styles remain untouched. Changing color schemes, or border widths, or what have you, just became dead simple. And I like that.

PS – Wondering about those crazy color names? I got them using Color Name & Hue and Name That Color, tools that give you color names for hex codes. Now you can use “cerulean” and “azure” instead of “blue 15” and “blue 16”. Also be sure to check out 0to255, which makes it very easy to find different shades of a given color.

PPS – Strictly speaking, I don’t need the layer of abstraction that maps hex codes to names like $azure and $bone, but I find that it’s much easier to remember that $azure is a warm shade of blue than the fact that #37649b is. It’s a little extra effort in the beginning, but I think it pays off.

PPPS – Also wondering about the darken function I used? It’s a powerful feature of newer versions of Sass.

Resources

comments powered by Disqus