Dark UI Design: Why tint the dark gray colors with a different (primary) color?

I’m currently building a desktop app and decided to go with dark UI. I got really inspired by the tools I use for web development (mainly Atom text editor), which have nice dark UI designs. So I started designing in Adobe XD and I’m currently happy with my UI design. But…

I have noticed that the gray colors I used in the design are purely gray with no tint of any other primary colors, which is not the case in almost all dark UI designs that I have seen so far.

Let’s compare my colors to Atom text editor’s.

Atom’s background: #2c3037
Atom’s side panel: #262a2f

My background: #262626
My side panel: #1E1E1E

Atom UI

My App:
Dark UI

Atom’s colors both have a slight tint of blue in them while mine has none (absolutely gray).

So my question is: Is there a reason/theory to choose dark colors like Atom’s? What is the connection between the tint in the gray and the choice of the designer?

I would appreciate any guidance.


I think the choice of a shade of tinted gray favors the personality of the application. As the comparison in the images of the question shows: the interface that only have pure black and white grays looks like an MS2 screen, which entails a perception of antiquity, expiration, old age.

Choosing a tinted shade of gray doesn’t have to be casual, on the contrary, it can reinforce the image of an application if it’s related to its corporate image colors, as it happens in the Atom interface.

There are several examples, https://www.di.fm/ use an interface in bluish gray tones related to their logo.

enter image description here

Does your application has a logo? Use it as a reference color.

Source : Link , Question Author : Ramtin Soltani , Answer Author : Community

Leave a Comment