How to name CSS color variables

The situation

When my designer gives me the design document for a user interface, he lists out the specific color codes for the interface’s theme.

Copying and pasting color codes is fine when you’re testing stuff but code needs to be both maintainable and scalable, so, it makes sense to use variables.

What names should you give your variables though?

Semantic naming

Frameworks like Bootstrap use semantic naming where colors are given names that indicate what they will be used for in the interface. So, you end up with names like primary, secondary, etc.

Sound simple enough but what if you want to use the primary color for something that’s not indicative of primary?

If you go ahead and use your primary color for something that’s not primary, then you end up with messy code because in the future you will come back and wonder why the hell a certain element is using the primary color when it’s clearly not primary.

If you use semantic names, your code must be semantic as well. This means reduced flexibility.

Another problem is deciding which colors to name primary, which ones are secondary, and so on. I don’t like to think about that before I can start coding.

Real color names

To solve this problem, it’s best to use real color names like red, green, blue, etc. If you have a ton of colors, this get unwieldy because you’ll have to figure out unique names for the colors every time a new color is introduced.

Luckily, a guy named Chirag created a tool because he couldn’t differentiate between various colors.

With this tool, you can easily name your colors and then have reusable color variables in stylesheets.