The Crayola Method: Color Variables in SASS

Last Updated: January 2016

If you’ve worked on a large development project, you’ve spent a great deal of time trying to choose semantic names for CSS properties and SASS variables.

Until CSS preprocessors came along, variables did not exist in CSS. There were only hex codes like #FFFFFF and #000000. They’d be scattered throughout your single, sprawling CSS file. When you wanted to switch everything from white to black, you’d find and replace #ffffff with #000000. Simple enough.

With variables, it gets more complicated.

Should I call it $color-red? Or $fill-red? Or $background-color? Should I store it in a variable? Would a SASS map be more appropriate?

Sound familiar?

So many questions when all you needed to do before was type #ffffff.

Color variables are hard to name

Color management has always been a pain point because:

  • Colors are already attached to names (blue, crimson, cyan, etc)
  • Colors are usually tied to specific types of content (links are blue, text is black etc.)
  • Colors tend to change frequently. What happens when the brand color changes from blue to red? You’ll end up with something insane like $color-blue: red;.
  • Colors often have many shades and tints that are hard to describe.

Introducing The Crayola Method

Box of Crayons

I’m giving you permission to choose variable names that work for YOU, the developer. Variable names that provide YOU with useful and memorable information.

I’m giving you permission to name your color variables like Crayola does crayons: in a human-readable format.

Do YOU know what mac-and-cheese yellow looks like? I sure do!

This is how I store colors in SASS variables:

// The Crayola Method
$color-mac-and-cheese: #E8E759;
$color-royal-blue: #4444E4;
$color-turquoise-blue: #59E8B3;
$color-deep-blush: #E17582;

Extremely straightforward. Very effective.

You’re not going to forget $color-mac-and-cheese. You just won’t.

Best of all, you can use $color-mac-and-cheese for the page background or the link color or as the fill color for that noodle-shaped SVG you crafted. Your variable name isn’t tied to any specific context.

Why it’s effective

  • It’s memorable.
  • It doesn’t lock colors to a specific usage.
  • It solves the tints and shades problem by eliminating the concept altogether.
  • It’s descriptive. You know exactly what you’ll get.
  • It’s simple. No complex color scales or SASS maps.
  • It’s fun. I like to have fun.

Naming the crayons / HOT TIP!

You could pull out a box of crayons and go to town. Or you could use Name that color. This nifty web app will help you choose memorable color names based on the hex values you provide.

When things change

Colors inevitably change over time. And the fix is simple! Open your favorite text editor and use find and replace like the good ‘ol days.

Things to avoid

There is one way The Crayola Method can fail: when a color changes and you fail to find and replace the variable name.

Beware of this:

$color-charcoal: #FFFFFF; // Hex value for white

Charcoal ≠ white.

When a hex value changes significantly, you MUST update the variable name.

Many are already using this approach

  • Buzzfeed – A hybrid approach. A mix of The Crayola Method (ex. $fill-red) and variable names that include basic context (ex. $text-gray).
  • Dropbox – I can’t speak for their SASS variables, but their color names could certainly fall under The Crayola Method. “Dropbox Blue”, for example.
  • Uber – Again, can’t speak for their SASS variables, but they use color names like “Uber Black” and “Uber Blue”.

A brief history of The Crayola Method (and what didn’t work)

I have tried every color naming scheme known to man.

I started with an approach similar to The Crayola method.

$color-yellow: #E8E759;
$color-blue: #4444E4;
$color-grey: #59E8B3;
$color-pink: #E17582;

But the system broke down when I started to expand the palate:

$color-yellow: #E8E759;
$color-yellow-dark: #CCCB1E;
$color-blue: #4444E4;
$color-blue-light: #8E8EEC;
$color-blue-dark: #1818A5;
$color-blue-darkest: #0F0F6C;
$color-blue-extremely-dark: #080840;
$color-grey: #59E8B3;
$color-pink: #E17582;

Instead of choosing descriptive, memorable names, I was lazy and appended -dark or -light. No good.

When you have a variable named $color-blue-extremely-dark, your system is broken.

Next, I had the bright idea to start using SASS maps, resulting in the same problems with even more unnecessary abstraction.

$colors: (
  yellow: #E8E759,
  yellow-dark: #CCCB1E,
  blue: #4444E4,
  blue-light: #8E8EEC,
  blue-dark: #1818A5,
  blue-darkest: #0F0F6C,
  blue-extremely-dark: #080840,
  grey: #59E8B3,
  pink: #E17582

Next, I switched courses entirely, choosing colors based on context and importance.

$colors: (
  primary: #E8E759,
  secondary: #CCCB1E,
  tertiary: #4444E4,
  accent: #4444E4,
  inactive: #8E8EEC,
  link: #1818A5,
  hover: #0F0F6C,
  active: #080840,
  focus: #59E8B3

This was great until I wanted to use the link color as a background.

I abandoned the SASS map. And the context.

Next, I tried an abstract approach, using only numbering.

$color-1: #E8E759;
$color-2: #CCCB1E;
$color-3: #4444E4;
$color-4: #8E8EEC;
$color-5: #1818A5;
$color-6: #0F0F6C;
$color-7: #080840;
$color-8: #59E8B3;
$color-9: #E17582;

This actually worked really well! That is, until $color-37 came around.

How was anyone (especially a remote collaborator) supposed to know that $color-37 was indeed mac-and-cheese yellow?

Another nightmare.

I eventually came full circle, using simple variables and descriptive names.

The Crayola Method was born.

I’ve used this approach on several projects and it has yet to fail me. I love it! I hope you do too.

Credit where it’s due

Throughout my color-naming struggles, my approach has been shaped by many great internet minds. In fact, many of the ideas in this post have been written about previously. I just wanted to share my personal experience and spread the good word about this approach.

This post was inspired by:

Comments / questions? Tweet @coryetzkorn