Overview

In the world of data visualisation, 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.

We also wanted it to be: easy with 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.

Overview #

The novem platform uses a unified color format in all places where colors can be provided. Novem colors can be specified explicitly with a hex color code (#ff3d5d), or by using a color name.

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, this is the color scale for the novem theme color blue:

To further expand on color options, novem offers a dark-mode option for all available colors. Dark mode works a bit different between theme colors and the extended colors — extended colors will have their gradient inverted, while theme colors will be adjust to a dark mode palette.

Below is shown both the light and dark colors for the novem theme color bad. The middle color differs slightly between the light and dark versions.

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

In contract, the extended color x-red, is unchanged.

{{ shortcode for the x-red color }}

The default behaviour of novem visuals is to detect the user’s preferred theme, but this can be overridden per visualisation. You can also specify both light and dark version of the color if precision is required.

Novem colors are hierarchical in nature. Since novem supports embedding multiple visuals within grids, documents, dashboards, and emails, the embedded visualisations will inherit the default color scheme of their context. For instance, a map with predominantly green tones may adapt to a blue color scheme if it is embedded in a document with a primarily blue theme.

Frequenly Asked Questions about color #

If you’re just starting 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.

There is also an 8-digit version (#ff3dba70), where the two last digits represent opacity.

What is dark mode #

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

More and more applications and web pages are supporting dark mode, and we want to make sure that novem visuals fit every context.