Existing Applications Dark Palettes

I have a specific passion with UIs that support night and dark light conditions. But this topic is so huge, that it is hard to start writing without the risk of being lost in theory and practice of human vision, opportunities of display devices, modern mass-market and niche approaches for edge cases (like usage in complete darkness or under direct sunlight) and so on. Nevertheless, some time ago I made a tiny research of existing dark palettes just because of curiosity, and I decided to slightly improve it and publish here.

With this research I wanted to get the answer to the question: “What is the current established approach to the design of dark palettes among relatively modern applications, that I may consider as professional tools?”

The reasons behind

The reason of the question above is simple: quite often we need to create a dark palette from scratch, and even if we consider normal dark palette usage (not edge cases that I mentioned above), it is not always clear — should the default background be closer to black or opposite, closer to average gray (i.e. #808080), should the default content color be white or slightly darker, what is the acceptable brightness of divider between panels or table cells, and so on.

Of course, we all have our own judgments and best practices, considering multiple factors, like aesthetics, modern trends, science (like contrast ratio or adaptation of human eyes to dark condition) and so on. But for me it was interesting, how other designers and companies solve this task, what is the average approach to it. And I believe that it may be useful as some kind of starting reference point, when we start designing dark palette from scratch. Of course, we may (and should) adopt it to our particular needs, but as a starting point — why not? In any case, I satisfied my curiosity and want to share it here.

Process and limitations

So, the idea is to take some more or less popular “digital tools” (desktop applications) and operating systems, and collect some statistics about the following colors:

• Primary content color: default color for text content, that is typically close to white
• Main background color: default color of UI palettes, content area, whatever is more applicable
• Secondary content color: color for secondary content, that is typically somewhere in the middle between primary and background colors.
• Dividers color: main color for dividers or separators

To make it simple, I decided to limit the selection to neutral, grayish colors, and ignore any hue-coded semantical colors, like the ones used for hyperlinks, warnings and other statuses. This limitation allows to skip all the multiple and contradictive issues with conversions of RGB values to brightness, calculations of relative brightness (subject of multiple arguments against WCAG 2.0) and so on, and also just because the selection of “colourful colors” is much more diverse. So, the result is very relative and even primitive, because it is based on the difference of RGB colors that are close to gray. But as most of us still work quite a lot with this type of color definitions (RGB, HSL), then the result will be more clear, than using much more scientific but complex calculations. And while I hope that I will continue and add more academic materials, it is more than enough for the goal of current research.

Of course I should mention, that selection of the applications is not comprehensive or representative at all, and that in some cases the selections of colors were very subjective (like for some apps it was hard to identify default divider or secondary color), and other selections would definitely lead to other results. Nevertheless, I hope it is still useful — or at least gives some fun.

But enough words, let’s go to the research itself.

Overview of measurements

The first task was to select some applications, and identify the colors for background, dividers, secondary and primary content. For this I took some screenshots of the tools I use and also tried to find relatively modern and full-scale screenshots of some other apps I was able to remember.

Also I made a simple Qt application that visualized the color values (I don’t want to call it “brightness”, but for simplicity let’s use this word in quotes — average value of red, green and blue components of the colors) at the following graph:

The horizontal axis represents the range of this “brightness” from 0 to 255, where I put the measurements for every application.

Most of the applications have the divider color that is slightly lighter than the background, but the last two (Photoshop and Ableton Live) have inverted dividers, which are darker than the background. So, in first case the left circle corresponds to the background, the second circle to the color of divider, the third—to the color of secondary content and the right one is the “brightness” of primary content color.

Solid line connects background with primary content color, representing the “brightness” range of the palette. If the divider is darker than background, then the corresponding circle is connected with background circle by dashed line.

What can we get from this graph?

As we can see without any numbers, all the applications cover only part of available range from black to white colors — so, there is no application, that utilized fully black background with fully white primary content color. It makes the contrast softer, and there are reasons, that we will skip in this research.

But we see, that the ranges of colors vary:

• Windows and Figma (relatively new UI3 palette) use the widest range with brightest white (#FFFFFF) color for primary content
• Relatively old Ableton Live dark palette has the narrowest range of brightness that is positioned in the middle of scale. Also we can see the same tendency with other relatively old-style products, like Maya and QT Creator.
• Some palettes, like Microsoft Visual Studio Code and Draw.io, have the whole range to be shifted left, which makes them look darker relatively to other palettes at the same display.

Another interesting observation: no application uses background colors that are close to darkest available RGB colors. Even the darkest Microsoft Visual Studio Code background is almost outside of 10% darkest range, and most others fall down outside the range of 15% darkest gray colors.

Also we see, that all the palettes use secondary color that is shifted right from middle “brightness” between primary and background colors—it is brighter, and one of the reasons that if it were in a middle, it would be too dark—hence unreadable—for the selected palette range.

The last thing to comment without any extra numbers is that most of the palettes, especially modern ones, don’t use too bright dividers to avoid extra clutter. Sadly, I couldn’t find more examples for inverted dark dividers, but the last two palettes show, that even with them, the difference with background color is not that significant. I personally prefer this approach, because they don’t add too much clutter being mixed with content and other elements, but it is not possible to use them everywhere.

Numbers

Now let’s move from qualitative to quantitative approach. Based on the statistics, it was easy to get the relative “brightness” (again, don’t confuse it with more scientific relative brightness that is used, for instance, when we calculate color contrast between elements) for the items, that I consider interesting. So, based on aforementioned observations, for every palette I calculated three numbers:

• Palette range (difference between background and primary color) in percentages of the whole 0-255 range. 100% means that full range is used, but as I mentioned above, there is no palette among selected apps that is even close to this.
• The relative brightness of secondary color, compared to the palette range.
• The relative brightness of divider, the same comparison to the palette range.

Here are these numbers:

We see, that palette range for most palettes is between 65% to 85%. The relative brightness of secondary color is between 60% and 70%. The dividers quite often cover around 12% of palette range.

Average palette

Now it is very easy to try to define an average dark mode palette based on these numbers. For this I took all the palettes that have dividers brighter than background color and simply calculated average background, average divider, average primary and secondary content colors. The resulting palette looks like this:

Let’s try to make some simple user interface, that demonstrates this palette. I took some of the components from my Protraktor UI kit and modified the colors (I also adjusted all the necessary colors to fall into this average range, so the overall impression is not very scientific). Here it is:

Probably, it is better to exclude products, that have too different approaches — Maya and Qt Creator. In this case we will get the following average palette:

All the colors have slightly changed, but it looks like a current “goldern standard” for dark palettes of applications — not very wide overall range, very light dividers, and secondary color that takes 2/3 of the overall “brightness” range. And this is the resulting sample UI based on this palette.

Both of the UIs look a bit boring, but probably not that bad as a default starting point for next dark palette?

Conclusion

So, we got the feeling of current average approach to dark palettes — both perceptual and quantative. It definitely has the reasons behind to be like this, and probably it was too much to write the whole post based on comparison of the colors.

But as I mentioned, while the overall approach is not very comprehensive and scientific, at least it raises the chances, that the new palette that we are going to create will not be too dark, too light, too pale or too bright in terms of contrast, compared to the other applications around.

Probably, it would be nice to add here some additional colors for content area background, buttons and even signal colors, but I think there should be always some space for more creative and/or scientific approach, than just by using averaged results (the same is actually applicable to the usage of AI generated assets — I wouldn’t rely too much on ready made things without extra fine-tuning).

I hope that this article was fun and it is just a warm-up before more serious and comprehensive materials, that will cover human visual perception and UX/UI-design approaches to support it in different conditions. Let’s see how it is going to be.