Choosing the perfect colors for an App UI : A guide for non-designers

Recently, we decided to completely redo the colors of Clueso’s dark mode. We had previously shipped dark mode on Clueso, but did so in a hurry and ended up with all the wrong colors.

Here’s what it looked like:

‍

‍

At first glance, you might think this looks okay. But on a closer look, you’ll notice several major flaws:

1. The greys are not saturated enough, giving a slight brownish tinge to the entire UI.
2. The non-greys look completely washed out
3. Elements that should have the same color have colors that are similar, but not exactly identical.

As a frontend developer with no formal design training myself, I could see that something looked off in our UI, but couldn’t tell what exactly. I recently read the book Refactoring UI by Adam Wathan and Steve Schroeger, and it became much clearer to me exactly what the issues were.

In this post, I want to highlight a few tips from the book and several other learnings I arrived at while redesigning Clueso’s color scheme.

For context, here’s what the result looks like:

‍

‍

Step 1: Don’t pick colors until your layout is ready

‍

Avoiding context-switching is crucial in any project. Picking colors for your app is no different. When you’re choosing colors for your app, you shouldn’t be thinking about what features your product has, where each button should be placed, or how much space each element should occupy.

Ensure you’ve answered these questions beforehand. To force myself NOT to think about colors and only about layout, I sketched our initial design with a marker on a whiteboard. Here’s what it looked like:
‍

‍

Once you have the sketch ready, build it out on Figma in grey scale. Only move to choosing colors after everything else is completed to your satisfaction.

Step 2: Work in HSL, not RGB or Hex

‍

The main issue with RGB and Hex is that very similar colors look very different in code. So, if a color is slightly too dark or slightly too dull, there is no way to tweak it without having to pick from infinite options on the color palette.

When you work with HSL (Hue, Saturation, Lightness), you can very easily finetune the three values to get the color you’re looking for:

1. If a color feels slightly too dark, simply increase its Lightness.
2. If a color seems too washed out or dull, increase its Saturation.
3. If a color doesn’t feel like the right shade (maybe it’s too greenish while you want it to appear bluish), play around with its Hue.

Just for context (I’m jumping steps here), this is the final color palette we arrived at for Clueso, and some observations on the same:

‍

1. You’ll notice our greys have a Hue of 220-230. On the color wheel, blues lie in the 200-240 degree zone. This tells us that our UI will have a bluish hue (which is what we desire).
2. Keeping saturation values low ensures we have greys that appear bluish and not blues that appear greyish.
3. As the colors get lighter, their Lightness value increases.

We would not have observed these patterns if we had worked with Hex or RGB.

‍

Step 3: Pick out 9-12 shades of grey

‍

For both dark and light modes, most of your app's UI will use shades of grey, except for some buttons or highlights. So before adding color to your grey-scale Figma design, select 9-12 shades of grey. In a dark theme, the darkest shades will be the background, and the lightest will be the text.

The background shade is the most important since other shades will derive from it. The easiest way to pick out your background shade is to draw inspiration (read “steal” – nobody has copyrights on colors) from some product you admire.

While drawing inspiration from another product, remember that its hue should be similar to yours. For instance, WhatsApp Web has a stunning dark mode UI, but its greys have a greenish hue, so don’t steal from there unless your product should look green, too.

The shades you pick out here will be the exhaustive set of greys you use for your app. As you start applying them to your UI, you cannot create any new ones, but you can modify these if they don’t look good (so don’t spend too much time perfecting them now).

You can’t pick the colors by doing math (trust me, I’ve tried), so trust your eyes. Do not apply mathematical operators like transparentize or lighten to pick out shades; these will only lead to washed-up, dull colors.

‍

Step 4: Don’t come up with clever variable names for your colors

‍

Once you have picked out the 9-12 colors you need, give them names. These names should be used as variable names for the colors in Figma and your code (SCSS).

Don’t name colors based on where they will be used in your app. Name them with numbers based on their darkness level: the darkest grey should be $grey01, the second darkest should be $grey02, and so on.

‍

This method has many benefits:

1. If a color you’ve applied looks too dark (or light), it’s easy to get a lighter (or darker) shade by incrementing (or decrementing) the number in the variable name.
2. You won’t find yourself creating new colors on the fly as you apply the colors to different elements of your UI. You will be forced to stick with your palette.
3. You will not end up with a scenario where “similar” colors are not exactly identical

If you really do need to have some colors named after UI elements, they should directly reference a numbered variable. For example, in our case, $border directly references $grey07, so we can use $border for all borders across the app.

‍

Step 5: Apply the colors to your design, and customize as necessary

‍

Remember, in a dark mode UI, elements at the back should be darker than elements up front. Use your $grey01 for the background color. Use $grey02 for the first level panels. Use $grey11 and $grey12 for text.

As you color in your UI, you will start to get a feel of whether you like where your colors are going. If you’re not happy, try not to create new colors, but edit your existing palette instead.

When placing text on top of backgrounds, ensure sufficient contrast so nothing gets washed out.

‍

Step 6: Finally, pick out the non-greys

‍

Follow a similar process for your non-greys. However, instead of 9-12 shades, you will probably need only 3-5. For non-greys, it’s important to have high saturation levels so that they stick out and do not appear washed out. It’s very easy to end up with buttons that look disabled to the user even though they are not.

‍

‍

And that’s it!

Hopefully, this is useful. As a non-designer myself, following these steps made it very easy for us to pick out a color scheme that we were eventually super happy with. Our customers gave us great reviews too!

‍