A neat way to arrange my colors into variables…

I am a huge fan of many colors. By default, I have 13 color scales of each color I choose for a project [although I end up using 5 or so.] It gives me the confidence that I can find a tint or shade of any color when I need it. Here is what my colors for a project normally look like —

Color scales

So…what is the problem

I had roles [where and how they will be used] for these colors but never explicitly stated them. For instance, I know Red 700 was my error color but I never stated it.

This was because I found it hard to do so. I wanted my base colors to maintain the same naming convention [Gray 0–1000] but would love to give some of them roles eg Surface color.

Renaming my base color was not gonna work as one color could have many roles. I was looking for a way to create roles and reference them to these colors [without changing the name of my base color].

This is where variables enter the show. Now, I can —

• have as many color styles as I want
• give them roles in a more intuitive way.

Read up on variables here.

At first, I found it hard to select between styles and variables, but I managed to work around it. Here is the heuristic I used —

• For pure colors [colors that aren’t mixed], use variables.
• Text styles can not be variables, so that won’t be a problem
• Spacing style should always be a variable.

Now that I know when to use a variable and when not to.

How do I arrange my color styles to variables?

Reference

I create 2 collections for my variables. “Reference” and “System.” If you know a thing or two about Google’s Material Design system, you should know where I am going. If you don’t, here is a simple way to look at it —

The Reference collection will hold all my color styles without any role. All the color scales I generated will be here. The System collection will hold all my color styles that have a role. In summary, Reference is a list of all the options I have, System is the one I choose to do something [the one I give a role] from those options

What I do now is convert those color styles to variables. You can do this the manual way or use a plugin called Styles to Variables Converter. Here’s how it ends up like —

Reference collection

System

Here’s where I give the colors from my reference a role. By role, I mean where it should be used on the project. To illustrate, I would use Surface color and Button color. Here is how they typically would look like —

System collection

Here, you can see that the roles “surface-color” and “button-color” are all assigned to a color from my Reference.

This way when I open up my styles to select a color for an element, I see the name and immediately know where I am meant to use it.

Selecting a color

To summarize…

• I use my favorite tool to create all my color options
• These options are added to a collection called Reference
• I take out colors from this reference and assign them roles
• These colors are added to a collection called System

And that’s it…

If you found this helpful, I suggest you subscribe to get similar content. I would also love to connect on LinkedIn or Twitter.