Naming things in programming in hard. What you name things matters. Naming is communication. You want the names in your CSS to be easy to understand. They need to quickly communicate what you were thinking.

What naming convention do you use to name your colors in CSS? CSS can be difficult to maintain. Save yourself and others time by picking an easy naming convention. Your choice can save you hours of debugging in the future.

Choose a Naming Convention

There are two types of naming or variable categories in CSS. Descriptive or functional. A descriptive name describes the value. A functional name describes a use. If you want a variable to display a blue color, you might name it --color-blue. When you want a variable for a specific purpose like an accent color, you might name it --color-accent. Use both variable categories to make it easier to maintain your custom color palette.

Naming Colors

Colors have tints, shades and tones. How do you know what to call each one? Use The Color API to find out what to call the colors in your color palette. You can put in a hex code or RGB value to identify your color.

Start with your color palette

It’s good practice to limit the number of colors in your design. Use descriptive names to define your color palette. Then, use functional names to further define your styles.

root: {
brand-blue-color: #0000ff;  
brand-green-color: #008000;
}

.article-title {
color: var(--brand-blue-color);
}

.primary-button {
color: var(--brand-color-green);
}

When you need to change your colors, you can easily do it. Simply change the color code. If that won’t work, create a new descriptive name and use that instead. Whatever strategy you choose, make it simple so you or someone else can easily make updates in the future.