Remember that text saying “in IT, naming thing is hard”? This is even harder when it comes to colors.

Most of the time, a color is already named. Red. Blue. Rebecca Purple. But those names bare no context. Anything can be blue. So, what to do, when we want to know, what we are dealing with?

Even more abstraction

One thing that I’ve used is to generate color names at random. With Name That Color, I was able to tell the difference between one shade of teal from the other. Even though they are visually different, in the code they are just different strings. Take a look at this:

:root {
  --color-spray: #74e5ef;
  --color-java: #24c7c0;
}

Seems pretty obvious and easy. Or does it?

Try to wait a bit. Forget some stuff. And suddenly, what is that “java” color? pops in your head.

Use contextual names

When you are getting your colors, they are for something. This is for the header text. That’s for links. And that one’s for the background. Why not name them as such?

:root {
  --color-bg: #fafafa;
  --color-text: #222;
  --color-links: #ffffaa;
}

This is the most readable thing you can do when naming colors. That way you won’t have to care whether this color is “red” or “blue”. It will be “background”.

Seems obvious, but much too often I found people reinventing the wheel.

Bonus: theming

During the design phase, colors are carefully picked. But sometimes a need arises. Let’s have a dark mode! Or let’s have a colorblind mode! Using contextual names allowed to define themes with ease:

:root {
  --color-bg: #fafafa;
  --color-text: #222;
  --color-links: #ffffaa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #000;
    --color-text: #666;
    --color-links: #fcfcfc;
  }
}

There you have it. Simply overwriting values basing on some external factors is very simple using such notation.

---

Naming things is hard. But using meaningful names will always be the way to go.

---

Photo by Sharon McCutcheon on Unsplash