Naming color variables in SASS

Naming stuff is the thing where I totally lack creativity. I've tried lots of different naming standards for color variables and I've found a method that works great for me. It's based around naming your variables using the color name it resembles most. I used Name that color to get the names of all my styleguide colors and ended up with the following in one project.

// Main colors
$color--mauvelous: rgb(244, 139, 173);            // #f48bad
$color--danube: rgb(85, 143, 196);                // #558fc4
$color--porsche: rgb(241, 185, 112);              // #f1b970
$color--cinnabar: rgb(229, 69, 69);               // #e54545
$color--peach-schnapps: rgb(255, 225, 217);       // #ffe1d9

// Grayscale
$color--shark: rgb(30, 36, 42);                   // #1e242a
$color--outer-space: rgb(45, 53, 62);             // #2d353e
$color--river-bed: rgb(68, 79, 90);               // #444f5a
$color--shuttle-gray: rgb(97, 108, 120);          // #616c78
$color--shuttle-gray-50: rgba(97, 108, 120, .5);  // #616c78
$color--athens-gray-dark: rgb(234, 237, 241);     // #eaedf1
$color--athens-gray: rgb(246, 247, 249);          // #f6f7f9
$color--white: rgb(255, 255, 255);                // #ffffff

I think that these names are much easier to remember. Especially the grayscale colors with names that aren't offwhite and extra-light-grey. You'll never forget peach schnapps either.

These work great on their own, but you might also want to add some complementary variables for common uses. This way you only have to change the background color, for instance, in one place.

$color--background: $color--athens-gray-dark;
$color--border: $color--white;
$color--error: $color--cinnabar;

As you can see I've also prefixed all the colors with color--. This makes it easy to see the type at a glance and also keeps things nice and tidy.

comments powered by Disqus