I often wonder if there's a sure way of going about CSS colors. I use SASS, which allows variables, so I don't need to replicate the hex values everywhere, but keeping track of colors is still problematic. I start with good intentions, with $white, $black, and $red, but once I get to shades, everything goes to feces. I add $light-grey, but then I need a lighter grey, so I add $lighter-grey, but then I need an even lighter grey, so I add $lightest-grey. At this time, there's no easy way to describe an even lighter grey, but it doesn't matter because they have all lost their meaning.

This is what I'm doing these days (I use SCSS):

// I use a list of gray variations, from white to black:

$cWhite: #FFFFFF;
$cGray5: #F1F1F1;
$cGray4: #CCCCCC;
$cGray3: #999999;
$cGray2: #666666;
$cGray1: #333333;
$cGray0: #000000;

// And then I define some basic colors for the current project:

$cBackground: #75ADB5;
$cLink: #397DB9;
$cLinkHover: #2E6893;
$cBorder: #E5E5E5;
$cRed: #C02216;
$cError: $cRed; // I also use synonyms

This solution is far from perfect (what happens if I need, say, the color #222222? or if at some point $cError != $cRed), but for the moment it has worked fine for me .

Oh, I forgot to mention that I use the prefix "$c" so I can use the [vim] autocompletion :)

I think the best approach is to define some general colors like you're currently doing, but then use Sass's lighten() sass-lang.com or darken() sass-lang.com for the color variations you need.

I usually specify a few colors and then lighten or darken them using an alpha channel. I've wanted to use the lighten() or darken() functions that Chris mentions above, but I haven't been able to get them to work yet.

I'm working on a site right now and using semantic names in a templated CSS file, and it seems to be working okay. Things like:

$standardBackground
$alertBackground
$buttonTitle
$detailText
$captionText

I generally have a few colors in the palette, each with a few variations of light/darkness. The names I use are generic, and semantic as to which version of the color they are.

I use scss to contain the @font-face rules and @import my sass files. I separate them by section like header, sidebar etc, and an _extend.sass for common classes.

In the _extend.sass sheet, I'll define my colors similar to this:

$black: #0a0a0a
$white: #fafafa
$grey: #5a5a5a
$blue: #093EA2
$light_blue: #0e5bea
$dark_blue: #073282

Then, I'll use these color variables to make some classes to @extend later.

.black_text
color: $black

.white_background
background: $white

Maybe I'll set up some others like these:

.light_shadow
text-shadow: 1px 1px 0 #white

As programmers we always try to make things into objects and want abstraction all over the place, but this doesn't work with UI. I think it's better if you define 5-6 colors (e.g. that specific green in your logo that you also use for your horizontal dividers) and just use the HEX value every time you need a color. This way you can change a single color for a single element without having the trouble of defining new color names which you will probably forget anyway

Maybe you need to look at whether you have too many colors that you are trying to use. A lot of consumers don't have the best and brightest monitors and slight variations in color might not be helping your design at all. Sometimes designs can flourish because of their limitations.

Jeff: I don't quite understand why you'd extend a bunch of classes that only have one CSS rule in them. Can you elaborate?

As for us, I was trying to make everything semantic, but realized it's probably easiest if I have shades to pick from, so ended up using a hybrid approach for branch.

I refactored our colors recently to 10 shades of gray, and to map actual colors to that numbering scheme (reds, greens, yellows...), I turn down the contrast to make everything pure grayscale. Here's what it looks like: dl.dropbox.com

I remember Nicole Sullivan mentioning in a talk how Facebook's CSS codebase once had hundreds of different declarations for their logo color, so militantly making sure all the colors come from a single source is probably a good idea. We do this for font sizes as well :)

@cemre - For properties used over and over in a stylesheet, I like to create a class for them to allow me to use @extend instead of writing them repeatedly.

But you had just one CSS rule in those extended classes, is typing @extend .white-background; that different than typing background-color: $white; ? or maybe that was just a too-short example? :)

It's not as much about typing it ( though that's what I wrote ) as it is having setting the property once, and adding classes to it. This is no different than you describe for setting the logo color the OOCSS way.

I'll be more clear here. That is a short example, but same principal.

If you use @extend, the class will be added to it's declaration, rather than redefining that property again in another.

We should have another branch about extending, I used to swear by them, then I realized it turned the actual stylesheet into a hairball when I overdid it :) Now I only use it for clearfixes.

I at first tried to use semantic naming schemes for layouts, but often found that in the end it was more trouble than it's worth (unless you're building a website that should have a quickly changeable colour scheme!).

I started using the "vim-css-color" for vim (github.com for those interested) to instead see the colours I was working with. This helps my visualise the CSS much better, and in conjunction with splitting up the files by the element they're attached to (header, footer, gallery, form, etc), this really helps me grok what's going on without having to resort to surfing around in firebug or chrome dev tools.