When visualizing your data, the colours present are one of the first things that will stand out to the viewer. Colour selection can therefore make a huge difference to the professional quality of a visualization. However, choosing colours for even a single chart is not an easy task. There can be multiple variables, clashing or indistinguishable colours, and concerns about accessibility and printability. This problem becomes more difficult once you have multiple charts on the same page – they should look pleasing together while also being easily readable.

In building White Whale’s platform for deploying and displaying data science solutions, DeepSea, choosing pleasant but functional colours for an entire dashboard of charts is one of the more challenging problems we have faced. In DeepSea’s drag-and-drop interface for creating a wide variety of charts, colours are assigned to the different variables on the chart automatically (with the option to set the colours yourself). Because you can build any chart you want in DeepSea, the platform needs to be able to choose nice, clear colours for any arbitrary chart and dashboard – anything from a dashboard full of single line charts and KPIs to one with multi-variable bar and scatter plots.

Trade-Offs When Colouring a Chart

There are two major trade-offs when choosing colours for any data visualization. The first is between colour contrast and readability and colours that look aesthetically pleasing together. This is especially important when there are many colours on the chart. Highly contrasting multi-hued colours make the data clearly readable, but they may not look great together and can be uncomfortable to look at. On the other hand, choosing colours purely based on aesthetics can result in colours that are too similar and can’t be distinguished easily when reading a chart.

Another trade-off affecting any chart is between colour-blindness accessibility and either of the previously mentioned, conflicting considerations. Choosing colour-blind friendly colour combinations rules out some possible themes, but is important given that about 5% of the population is colour-blind. This is an especially important consideration for DeepSea, as its purpose is to provide a high-quality data science frontend right out of the box, and accessibility is part of that goal. 

Choosing Colours Across a Dashboard With Many Charts

DeepSea’s colour system also needs to choose colours for a wide variety of charts, in the context of a dashboard containing many related charts. The additional challenges that come with this are supporting various types of charts and data in the colours chosen, and choices about the cohesiveness of colours across the whole dashboard. For example, some charts have overlapping points or lines, while others have adjacent bars, and some charts contain many colours while others only have one colour. In choosing colours for the entire dashboard, we want to ensure that all individual charts are still readable, that the dashboard looks aesthetically pleasing, and that it strikes a balance between consistency, variety, and user control over all the various colours. 

It is important for the colours and theme to be fairly consistent so that they look nice and potentially make the data easier to interpret across multiple charts. However, things can also be too consistent: a page with many elements that are all the same colours can look boring and can make charts with many variables hard to read. The more variety there is in an automatically generated set of colours, the more likely it is to choose colours that clash with other ones in the theme, but the less likely it is to choose the same colour multiple times. It’s best to stay near the middle of these two extremes, to minimize the negative effects of either one. 

Our Chart Colouring Strategy

The core of our approach is choosing colours from a gradient in the LAB colour space.

We chose a gradient because it allows more colours than a colour palette would, but still allows us a lot of control over what colours we are picking from. This way, we can avoid colours that are unpleasant, not displayable on a screen, or too close to the background colour, because we know exactly what colours fall within the gradient and can easily visualize them. A simple colour palette is a great choice for charts with hand-picked colours and non-continuous data. We need something more flexible because we are auto-generating colours for a wide variety of user-created charts, and we plan to support colour gradients over continuous data in the future. 

There are two reasons that we define our colours in terms of the LAB colour space. The main reason is that LAB colour distance is much more similar to people’s visual perception of colour distance. This means that we can avoid choosing combinations of colours which may be far enough away in RGB space, but are not actually distinguishable from each other by most people. Also, when defining a gradient in RGB, the generated colours in the middle are often rather grey or blackish - we want to try to avoid generating ugly or lacklustre colours as much as possible. 

To illustrate the differences between LAB and RGB, the following diagram shows that LAB gives more of its total space to colours that are bright & clearly different to us, and less space to neutral colours like grey, white, black, and brown. RGB and CMYK both give more of their total space to neutral colours, meaning neutral colours appear more often when generating colours in RGB/CMYK space.

It was also important to maintain colour-blind accessibility as much as possible, so we tested our gradients using tools to evaluate how colour-blind-friendly they are. We used the chroma.js colour palette helper for this because it offers a lot of information about contrast and accessibility of colour palettes or gradients. To create a palette that is accessible to all three types of colour-blindness, it is important to vary the lightness – and, often, saturation – of the colours just as much as the hue. That way, the colours are still distinguishable by their lightness regardless of which hues appear the same to someone.

We generated gradients for several colour themes, to give the user some control over the colours of their charts. Our gradients start out from hand-picked palettes of colours, or from industry standard palettes. The main outside source of palettes that we use is Color Brewer, which has a variety of palettes based on data visualization needs, originally used for map visualizations. Users of other data science libraries such as matplotlib or plotly may recognize these palettes, as they also come with those libraries. We also allow users to choose their own colours, so that they can have full control over their charts.

Where Do We Go From Here?

One of the guiding principles behind our product design & development at White Whale is iterative improvement: we strive to make something good, then to learn and work toward a better solution over time. In keeping with this philosophy, and because there are many considerations involved in this problem, we’re excited for how our colour algorithm, along with all of DeepSea’s dashboarding functionality, will continue to grow & improve in the future.