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:
- Mondrianum—since discontinued—which enables you to access Adobe’s color palette creation and sharing service, Kuler,
- Apple’s built-in color list manager, where you can create and save color palettes,
- Hex color picker, which enables you to get hex codes for the active color in the Mac OS color picker,
- Antetype color picker, a Photoshop-style HSB-based picker that may be more intuitive to some than Apple’s RGB-based picker.
- Hues, a small program that allows you to launch the Mac OS X color picker as a stand-alone application.
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:
I could use them like so:
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:
Then I could do this in my code:
And any time I need to switch colors, all I need to do is change the values of
$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
$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.