.png)
Recently, we decided to completely redo the colors of ’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:
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:
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.
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:
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:
%201.png)
We would not have observed these patterns if we had worked with Hex or RGB.
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.
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:
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.
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.
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!
.png)
.png)
.png)
