Check it out! Funnel analysis is now available for public preview in Hashboard!

Back to Blog

Making Custom Colors “Just Work” in Hashboard

Charlie Imhoff
Charlie Imhoff
April 4th, 2023
Making Custom Colors “Just Work” in Hashboard

It comes in as a simple request: “we want custom colors for our charts in Hashboard”. It seems simple, but doing it well is more nuanced than you may expect.

Just Picking Colors

When you build charts in Hashboard, you’re not just building a single chart, you’re building a jumping off point for future exploration.

Picking individual color values is okay if you are building something one-off, but the issue is that it becomes cumbersome when exploring data. As the series change, it becomes very time consuming to keep the colors up the date, and often results in repeating the same colors twice (making the chart unreadable).

stacked bar chart with repeated colors

a chart with repeated colors makes it difficult to understand what marks correspond to which series

So Hashboard's approach to colors needs to be more dynamic. If changing the series broke all the colors, that wouldn’t be a fluid experience as you explore, it’d be an interruptive one. We want to allow people to focus on their data, their questions, and their answers. We don’t want to have people bounce into formatting options in the middle of their exploration. Colors need to “just work”.

stacked bar chart with distinct colorsa corrected chart with distinct colors

Color Palettes

Instead of associating a color to each series, a chart has a color palette. This palette is a bundle of colors that fit your brand, theme, or particular use case.

Hashboard's default color palette: “Twilight”Hashboard's default palette: “Twilight”

Whenever the charts need colors, the visualization requests a distribution of distinct colors from the palette which maximize contrast. If the chart needs two colors from a three color palette we’ll pick the two most distinct colors. If the chart needs all three, we’ll grab all three.

But what if you need 4, or 5, or 100 colors? It could repeat the provided colors (and we have an option for that) but generally we want to have distinct colors so that all the series are uniquely identifiable.

Interpolation

When the chart needs 4 colors from a 3 color palette, we need to generate new colors. To do so, we need to interpolate.

  1. Map the 3 colors in the palette into a shared color space

  2. Draw connections between the colors

  3. Sample colors along the connection

  4. Form a gradient from the samples

  5. Evenly divide the gradient to produce final colors

<div style="position: relative; padding-bottom: 62.5%; height: 0;"><iframe src="https://www.loom.com/share/c11b0b6f486b4db9bebf34c40523de01?sid=7afcfd5f-111a-4da7-b66e-d40bfcb6337c frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

Voila! Four distinct colors (two of them brand new), which fit our theme and maximize contrast. If we needed five colors, we don’t even need to recalculate our gradient, we just need to divide it into five segments.

Color Spaces

This process can have vastly different results depending on how you map the colors into a color space.

Using a different color space, we could produce a very different set of colors:

<div style="position: relative; padding-bottom: 62.5%; height: 0;"><iframe src="https://www.loom.com/share/3690807bdfb9425d87c0c0a398131b59?sid=2b75d344-dc1c-4e39-99f1-1f0fe3d70681" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

The results from using these 2D color spaces are okay, but if we want a better interpolation from yellow to teal, we need a more nuanced color space.

There are actually hundreds of ways to map colors into a space for interpolation. Many of them are 3D, and a few are 4D!

projections of different color spaces

Some commonly used color spaces in computer graphics.
Image courtesy of the University of Kansas School of Engineering

Dependent on the color spaces, we get slightly different results:

the same color palette projected into different color spaces

In the end, we decided to use the HCL color space, as we found it works well for a variety of palettes.

Colorful Charts

So that’s the ballgame. Simple requests sometimes need careful implementations to preserve Hashboard's first class user experience.

Now… you didn’t think you’d leave empty handed did you? You read a whole blog post about colors!

Here’s a couple of great looking color palettes, on us, alongside their DataOps config (Hashboard lets you control your visualizations as code if you desire). You import these directly into your own Hashboard project.