Naming Colour Variants

One of the difficult things in the field of software development is naming variables as meaningful as possible. A good variable name is not only important for clean code but also to facilitate the communication across functions such as product managers, designers and developers.

---

Style guides and SASS variables

As the new frontend development goes, style guides are a common way of getting the specification and implementation work of user interfaces organized. This is the way designers, product owners and devs can easily communicate with. With the introduction of SASS and broad support for CSS variables, it is very easy to change a single variable to reflect a design change across the product.

When the project and style guide grow in size and complexity, mostly we stumble upon the variable names especially colour names.

Colour variables are nice but…

Let’s take a typical scenario of colour variants and how we name them.

$gray-darker:            mix($gray, $black, 30%);
$gray-dark:              #4c4c45;
$gray:                   #727267;
$gray-light:             mix($gray, $white, 50%);
$gray-lighter:           mix($gray, $white, 30%);

Looks all good and well. But the moment we are asked to add one more shade of gray the eminent problem with this naming convention emerges.

Finally, we end up with something like this

$gray-lightest:          mix($gray, $white, 45%);
$gray-lightester:        mix($gray, $white, 50%); // contribution to dictionary
$gray-light-medium:      mix($gray, $white, 30%); // LoL

Soon we would end up with something really really messy.

Name that colour

As we know this problem is not unique to us and try to reach out the internet gods. Then we have seen there are websites which would give names to colours! Why not?!

Here is what we got while trying to use one of the sites

$bright-gray:   #394149;     // gray
$shuttle-gray:  #565d64;     // light(15%)
$rolling-stone: #70767c;     // light(28%)
$shark:         #1f2428;     // dark(44%)

This is a good step forward in the direction of facilitating communication. However if we take a close look at the example above, these are all shades of gray and the assigned names such as shark and rolling-stone don’t reflect this relationship between the color variants.

Numbers everywhere

Let’s try another approach. Use numbers and believe in mathematics. For each variant of the colour we could append incremental numbers (just like IDs in programming)

$space-gray   : #394149;
$space-gray-1 : #70767c;
$space-gray-2 : #565d64;
$space-gray-3 : #356879;
$space-gray-4 : #1f2428;

All good and well. Problem is solved 100% from the perspective of a developer. But we couldn’t persuade our designers to use these variable names because it’s not easy to communicate with each other. So we are back to square one.

Finally!

As we were thinking more about it, the root cause of the problem is that we are not reflecting the shades of the colour in the variable names. So instead of adding different names or numbers for colour variants, we could try adding the shades in the variable names itself.

$space-gray:     #394149;  // gray
$space-gray-w28: #70767c;  // light(28)
$space-gray-w15: #565d64;  // light(15)
$space-gray-b44: #1f2428;  // dark(44)

The designers could easily communicate and visualise this and also the devs could implement this without the fear of having messy variable names once we have to add one more colour variant in-between.

So next time the designer wants 30% lighter space-gray we have the variable name ready: $space-gray-w30.

Photo by Pankaj Patel on Unsplash