Overview

In the world of data visulaisation colors are a hidden superpower. With a single value they can convey good or bad, large or small, important or superfluous, professional or personal, expensive or cheap. But colors can also be deeply personal, cultural or inaccessible.

When building novem we wanted to empower our users to to create the perfect visualisation. Whether for their personal blog or video, a professional newspaper or a startup stats dashboard.

We also wanted it to be easy – with a good looking defaults, modern – in adapting to trends and changing preferences, and contextual – by picking the right colors at the right time.

This document explains the novem color system, how to use it and how to modify it. If you have any questions please don’t hessitate to reach out.

Overview #

The novem platform uses the same color instruction in all places where colors are to be provided. Novem colors can either be supplied by name or by a hex color code. The novem color names can either be a theme color name or one of the many named colors from the xkcd color survey.

In addition to having a large pool of named colors, we’ve also created a gradient scale for each of the color names. If you add -100 to -900 after the color name you’ll get a lighter or darker version of that color.

As en example, below is the color scale for the novem theme color blue.

To further expand on color options, novem offers a dark-mode option of all the available colors. Dark mode works a bit different between theme colors and the extended colors. For theme colors the actual color might change slightly for the best dark mode adaptaion. For the extended color names only the gradients will adapt.

Below we’ve shown both the light and dark colors for the novem theme color bad. As you can see the middle color differs slightly between the light and dark versions.

{{ shortcode for the color bad in both light and dark }}

However if you look at the extended color x-red you’ll see that both the light and dark version of the color is the same.

{{ shortcode for the x-red color }}

All novem visuals will by default try to guess if the viewer wants to see the dark or light version of the color, but this can be overriden by the creator. When creating the visualisation it’s also possible to specify both the light and dark version of the color, overriding the default beahvior.

One last thing to know about novem colors is that they are hierarchical. Because novem supports adding multiple visuals together in grids, docs, dashboards and mails – the visaulisation being embedded will inherit all the default colors of the context it is being used. This mean that a map with lots of greens might be turned into blues if it’s embedded in a document with a predominantly blue color scheme.

Frequenly Asked Color Questions #

If you’re just staring out with data visualisation and colors a lot of the information in this document might seem overwhelming. If that is the case, hopefully this little Q&A section can offer some help.

What is a hex color #

A hex color is a web and design convention of describing a color with 6 hexadecimal digits prefixed by a hash (#) symbol. The number can be though of as three groupings of 2 letters representing all values between 0 and 255 (00 to FF). These values correspond to the Red, Green and Blue primary colors used to create the color you want.

N.B. sometimes 8 digits can be supplied with the last 2 representing an alpha channel (opacity).

What is dark mode #

Dark mode is a modern convention where a web browser can tell a web page that the users prefers a color scheme with a dark background and light text.

More and more applications and web pages are supporting dark mode and at novem we want to make sure our visuals fits every context.