As designers, we often base our color choices on what looks best for the specific element we are working on. When we do this, the only consistency will be our personal taste and we might end up with a slightly inconsistent use of colors because of it. And an inconsistent color palette will give you problems once you want to create a secondary color scheme, or a dark mode.

Applying a systematic approach to our colors will help us stay organized and give us reasoning behind how and when we use certain colors. But most importantly, it will enable us to easily apply a new color scheme to our design. Our Dark Mode will only be a few color tweaks away, once everything is put into the system.

Let’s dive into one approach of creating a color system.

Roles

As with all systems, one of the most important things are reasoning. Why we’re using this color instead of that color. That’s exactly what we need to do. We need to assign roles to all of our colors.

Luckily it’s really simple, and we can learn a lot from both Apple and Google. You can dig into their documentation to know how they work with color systems.

Looking at our own color system, we need to define our roles and give them clear and descriptive names. The name of our colors should convey the purpose of the color, and not the specific color value.

For this case, we will split them into 3 categories.

Category 1 — Tints

A tint is often the brand color and our secondary colors. We can add as many tints as we need. I.e. we might have a brand color and a few semi-transparent variations of that brand color.

Gradients should be added as individual colors. This will make it easier to change later on.

Tints are usually used for interactive elements, but they don’t have to. The only important thing is that they have a defined role.

So let’s do that.