Naming Colors in SASS

Naming color variables in SASS is something I have always had issues with. At first I started off doing something like this:

$red: rgb(212,65,43);
$red-dark: rgb(202,0,2);
//etc...

This seemed like a good idea however it quickly became clear that this would not work. What happens if I want to create a color darker than $red but lighter than $red-dark?

I then started to name colors like this:

$red1: rgb(10, 0, 0);
$red2: rgb(202,0,2);
//etc...

This is slightly better because there is no context in the variables name so I can make $red3 darker than $red1 and lighter than $red2 but I still didn't really like this method of naming either.

Name That Color

In my researching of naming SASS color variables, I came across a tool called Name That Color. You give it a HEX value and it gives you the name of the closest matching color. With this tool I now name my colors like this:

$valencia: rgb(212,65,43);
$guardsman-red: rgb(202,0,2);
//etc...

Now you might be saying "How and I supposed to know what color $valencia is?". That is a downside to this method however that can be resolved by grouping logical colors together and comments. With that, I don't think it is any worse than names like $red1 and $red2 and it is more flexible that $red and $red-dark. It is also not like $red1 and $red2 is all that much better. Even though I know all $red* variables are red colors, that does not mean I don't have to look up the color in the styleguide when deciding which red to use. Since I am going to have to lookup the colors anyways, might as well give it a real color name.

This method also has a slight upside which is that it can help identify very similar colors. There is somewhere around 1500 color names it can give so if I give it a value and it gives me a color name I already have, I probably don't need both colors. It also helps there is not a common system to generating color variable names.

Commandline Tool

While the Name That Color tool is pretty nice I did not like the fact that I had to use a website to use it and that I needed to give it a HEX value (I usually use HSLA for colors but I will get to that in another post). To solve those issues, I created a small NodeJS command line tool. After installing it you can run:

name-that-color [color value]

The [color value] can be anything that is supported by the One Color library. You can use it like:

name-that-color "hsl(120, 75%, 75%)"  
hsl(120, 75%, 75%) name is Sulu  

I have only been using this naming convention for the past month or so but time will tell if this naming convension works better for me than other. How do you name you SASS color variables?