How to name a color in Android

Miroslav Kacera
ProAndroidDev
Published in
5 min readJul 17, 2020

--

Photo by Francesca Saraco on Unsplash

As a software developer, you have probably heard that too. Naming is one of the hardest things in programing. According to Phil Karlton it comes with caching.

There are only two hard things in Computer Science: cache invalidation and naming things.

— Phil Karlton

But for caching you have lot of libraries at hand nowadays, right? That probably makes naming the single hardest thing out there.

I’m not going to solve this single handed but I would like to offer my opinion how to solve one specific part of the struggle related to naming of colors in Android development.

I’ve been an Android developer for some time already and worked on several projects for different companies. What I’ve seen most of the time is that every company really cares about the design and company identity but seldom care about actual implementation of styling in their apps. As long as the screen looks good enough nobody cares about the mess in resources xmls of the project.

Going through color xmls reveals tens or even hundreds different color names, sometimes even versioned with v1_, v2_ prefix etc. Some of the colors are unused, some are duplicates and nobody really knows which one should they use. So they define a new one just to be done with it…

Often times I see names which are mix of actual names and names based on the usage in the app like this:

I’m not sure if you ever heard of color home_page_item_subtitle but I didn’t. 😅 Some of my favorites are also names similar to login_button_background or user_profile_background.

Using names based on usage is really common and honestly, who didn’t write some by himself or herself? Heck I’ve definitely done that before.

Same happens with strings. Names like user_login_action_button_text are way too common to my taste. But this is even more complicated than with colors. I can consider writing about that as well, let me know in the comments if you would be interested. 😛

Okay, let’s move on. I guess we can agree that nobody can imagine, not that even reuse, colors named like that.

More recently, another popular opinion is to use material color palette names popularized by material design. That looks like this:

From the look of it, it already looks like an improvement. Names contain words like red, green and so on. We can imagine those, can’t we?

The problem is there are way too many green or red colors. And what the heck are those numbers and why some even have an a prefix? 🤯

Turns out it’s not something you can easily guess because it’s not anything specific. Just made up numbers representing shades of the color with 500 being a base. Something similar is used in typography for fonts. If you are still confused, you are not the only one:

https://graphicdesign.stackexchange.com/questions/43021/what-exactly-are-googles-500-color-swatches

It can be also quite misleading, take a look at these two colors:

One of these supposed to be red 🧐

Both of these colors are 50 swatches from material color palette. More specific, one is shade of red, one shade of pink. I think it won’t be much of a surprise to tell you that the one on the right side is pink, right?

Meh, I’m kidding obviously. It’s pretty clear the pink one is on the left and the red one on the right. Or is it?

Color names from material palette can be quite misleading.

Why can’t we call red, red and green, green then?

It turns out we can. And I think this is the most natural and best suited solution. That also applies even in case you are a regular person who knows six basic colors and other names are just meaningless jimble jumble.

That’s because the name is not that important after all, as long as it makes sense to you and your team. But we will get to that point in a minute.

You can use made up names for the colors based on the actual appearance like school_bus_yellow or search for some tool which can turn your hex representation to something “unique”. I, personally, recommend to use a tool for two simple reasons:

  • As a lazy developer it’s always great if somebody else (or something else) can think instead of you
  • It can prevent unknowingly introducing similar colors into your palette

You can find a plethora of such tools online. One I’ve randomly found, is the one published by Chirag Mehta at http://chir.ag/projects/name-that-color.

Entering hex value or RGB values will tell you the name for that color. Entering really similar values yells “same name” and you should probably stop and think for a moment why you are creating new color which looks almost identical to the one you already have (reason no. 2).

The result of using such a tool looks like this:

No more useless names based on usage, no more confusing swatches numbers, but... I know these names could be also non-intuitive for most of us but as I mentioned before that shouldn’t be an issue because you shouldn’t be referencing those colors directly a lot anyway.

Stop using colors and styles directly

The mistake most of the developers are doing is not paying much attention to how themes and styles actually work. That is mostly due to the fact that it is a pretty complicated framework on its own.

Even people building Android know this and try to help with documentation and articles for this topic. Nick Butcher wrote a really great series of articles dealing with Android styling system.

Getting a grasp on it requires time and experience but jump starting is quite easy. For most developers this crash course is the only one they take, leaving most of the framework unmastered.

Then, instead of focusing on creating versatile theme and using theme attributes in the layouts and code, they reference colors and styles directly creating a sh*tload of them in the process.

DON’T DO (try to avoid):

android:background="@color/my_background_color"

DO:

android:background="?attr/color_background"

I don’t want to go on how exactly you should be using (and creating) themes and referencing theme attributes instead of directly referencing colors (AND styles) as that was not my intension with this article and it would be also impossible for me to find big enough potato to justify the length of it. 🥔

You can of course go on and read the articles by Nick mentioned before or leave me a comment if you want me to elaborate little bit more on this topic.

Thanks for reading and let me know what fancy color are you planning to add to your project next. 😛

--

--