How I build color palettes for data visualization

A few notes on choosing colors that actually work in a chart.

Choosing a color palette for data visualization is a challenging task. When selecting a palette, it’s not just about beautiful or varied combinations — it’s also about how the colors relate to the meaning of the data, the chart format, and what you want to draw the reader’s attention to.

In this article, I’ll discuss my approach and how I choose colors for charts. We’ll start by looking at what makes a good color palette and the roles colors play, and then we’ll build a complete palette step by step.

Throughout this article and in my work, I use the Data Color Tool. I created this tool specifically to speed up the process of selecting and adjusting colors, as well as to generate harmonious combinations by default. Of course, you can use any other tool or do without one entirely: this does not affect the principles described in the article.

What makes a good palette

The colors in the palette may be easy to distinguish and serve their purpose, but the chart may still look disjointed and unpolished.

In the first pie chart, the colors themselves are distinct and do not disrupt the visual hierarchy, but in this type of chart, each slice tries to draw attention to itself with its excessive color intensity, resulting in a fragmented color composition overall. We see only colors, not data.

In the second pie, the palette is calm and balanced and the colors work quite differently — they do not draw attention to themselves or distract from reading the chart. At the same time, it is clear that different colors do not necessarily have to look disjointed or resemble a rainbow. It’s possible to achieve both harmony and readability through other means. For example, by working more subtly with color tones, varying their lightness, and maintaining an overall nature-inspired feel.

A good color palette is based on the answers to three questions:

• Meaning: Is the color appropriate for the data and the task?
• Distinguishability: Can you confidently tell the relevant elements apart?
• Visual hierarchy: Does the element that should stand out actually stand out?

To these three functional requirements, we add visual coherence when all colors work together to achieve a unified balance.

Therefore, both pie charts may serve their purpose, but in the second one, harmony and visual coherence create a stronger sense of unity, keeping the focus on the data rather than on competing colors.

The illustration above shows the same data, but each pie chart offers a different focus or way of reading the data solely through its color palette. Each palette is harmonious and serves a specific purpose:

• Categorical palette: helps distinguish between parts without emphasizing any one of them.
• Accent: directs the reader’s attention to a selected category.
• Sequential: emphasizes the natural order of categories; in this example, it’s the progression from younger to older age groups.

A good color palette is about more than a pleasing combination of colors. First and foremost, it’s about aligning with what we’re showing, why we’re showing it, and in what form. Visual coherence follows functionality.

Color and the meaning of data

Color can serve different purposes in data visualization, and this often depends on the data you’re working with and exactly what you want to show in the chart. Therefore, a single color palette even one that’s carefully tuned and visually harmonious may not work equally well across different tasks.

Depending on the data, tasks may sometimes require opposite approaches. In one case, making colors easy to distinguish may take priority, while in another, a consistent lightness progression is more important, achieved through the use of a single hue.

There are several main purposes that color can serve, and each has its own characteristics:

Differences: When we need to distinguish between independent categories, the palette should consist of distinguishable colors that — colors that differ clearly in visual weight, lightness, or hue.

Comparing two groups: When we have a carefully chosen pair of colors, rather than just the first two colors from a large, general-purpose palette. The first two colors may, of course, happen to work well together by chance, but there’s no guarantee that they’ll provide the necessary contrast or balance.

Focus: when we need to highlight something important on a chart; in this case, we use an accent color, while all other elements will be shown in a neutral color or several distinct secondary colors.

Order and magnitude: when we need to show an ordered sequence in the data, or when the categories are either irrelevant or have secondary importance. In this case, even a sequential change in the lightness of a single hue already provides information about the data.

Deviation: when we have data that deviates in both directions from a meaningful center. The center can be visually subdued or prominent, provided it conveys meaning on its own.

Semantic relationships: when we need to show related categories, statuses, or directions of change. Here, color can reflect an existing semantic relationship among the data, for example, a shared cool palette for filled areas representing the volumes of related categories or a progression from yellow to orange to red to indicate increasing warning severity.

A one-size-fits-all palette is more likely to hinder your work than help it. You’ll find that certain color combinations or relationships between colors are missing from it.

That’s why I recommend creating different palettes for different tasks and, based on the specific data, refining them to convey the intended meaning and visual tone.

Chart types and color choices

The chart type and, more specifically, the elements it’s built from affect the choice of color palette. In some cases, saturation can be helpful; in others, it can be a hindrance. You need to evaluate the palette within the context of a specific visualization; you can’t assume in advance that a chosen palette will work well in every chart format.

Lines and small dots, such as those in scatter plots: here, the color must be distinguishable over a small area and remain clear in thin lines, especially when they intersect. Colors that are easily distinguishable on large elements of a chart may look completely different in smaller marks.

Pie, donut, and stacked charts: In these charts, the colors sit next to one another, and it’s important to consider both how distinguishable they are and how well they harmonize visually, so that the colors help the chart feel like a unified whole.

Area charts, treemaps, and other charts with large filled areas: Color takes up a lot of space here, so softer palette options and more subdued colors may work well. Sometimes these can even be pastel colors.

The chart’s form often determines the parameters of the color palette — that is, what the colors should be and how they should harmonize with one another. You can select the most visually appealing palette, but until it is used in an actual chart, you can’t be sure how well it works.

Colors that work together

In my work, I typically identify six main types of palettes used in charts:

• Qualitative — Independent categories with no order.
• Sequential — An ordered scale from from low to high.
• Diverging: Two directions relative to a meaningful center.
• Grayscale: An achromatic scale, although it is essentially sequential as well.
• Binary: A scale that shows a comparison between two elements.
• Accent + Secondary: A scale that distinguishes the primary from the secondary.

Let’s take a look at each palette and the nuances of how it’s put together, and work our way from simple to complex.

Grayscale

A grayscale scheme can be used simply as an artistic choice for a monochrome design. It is used for black-and-white print designs to ensure that chart elements remain distinguishable. It also works when a chart has a focal point, and all other elements should be secondary but still distinguishable through varying shades of gray.

The scale is constructed with a specific number of steps, ranging from the darkest color to the lightest. The darkest color can be either black or slightly lighter. However, the lightest shade requires caution; it’s important that it doesn’t blend into the background and remains as distinct as all the other steps. I usually set the limit at 15% opacity of the darkest shade on a white background, so the lightest shade remains clearly visible against the background.

The simplest way to create this scale is to divide the difference in lightness between the darkest and lightest colors by the desired number of intervals (five colors, with four intervals between the endpoint colors). Therefore, divide the difference in lightness by the number of colors minus one. Then, incrementally increase the lightness value starting from the darkest color for each step.

Grayscale doesn’t always have to be strictly gray; a slight color tint can make the palette more visually appealing or better suited to its surroundings.

Sequential

A sequential scale is built with a step-by-step progression from a lightest shade to the dark shade. This type of scale is used to show the order of data or its magnitude from smallest to largest.

It is important that the lightest color is distinguishable from the background; it also conveys information and should not be lost. A useful trick is often to choose a starting dark shade that is slightly darker than the standard color in the palette. This provides a wider range for distinguishing between the steps.

For charts such as heatmaps, it’s sometimes helpful to add more saturation to the original colors or to the final palette. This way, the color can be more effective, using both lightness and color intensity to convey information.

Sometimes the progression isn’t limited to a single hue. There can be two different colors at opposite ends of the scale. This is often used when color represents a meaningful intensity, such as from low risk (yellow) to high risk (red).

Diverging

A diverging scale shows differences in both directions from zero or a common center. The central color can be neutral if the value represents the norm or zero. It can also be visually prominent when the central value itself carries meaning. For example, Red → Yellow → Green in a chart showing “Lack of moisture → Optimal moisture → Excess moisture,” where yellow represents the optimum, i.e., an intermediate value on the scale.

It is best to make the neutral color of the center distinguishable from the background of the chart, because it, too, represents a value rather than missing data.

Typically, the number of steps on a diverging scale is odd, so that the middle becomes the true center.

As with sequential scales, you can use slightly darker shades at the ends of the scale so that the range allows for greater distinctions between steps.

The endpoint colors can carry meaning, for example, if they follow standard conventions, such as blue for cold temperatures and red for hot ones. If the goal is not to follow established conventions, you can use any colors at the ends; the main thing is that they are distinguishable from one another.

Binary

Typically, a binary scale is used to compare two values — such as two lines, before/after, or inbound/outbound — or to represent clearly distinct categories, such as men and women in a population pyramid.

Often, the colors in a binary scale can carry their own meaning, for example, a cultural one, where men are represented by blue and women by pink. But this is not a rule; it is merely a cultural convention. The colors can be anything, as long as they are clearly distinguishable.

At the same time, it is important to maintain overall harmony and visual coherence among the colors so that they do not compete with one another. For example, green or purple often compete with blue, so they aren’t the best choices.

Light and dark shades of the same color work well together. This is a simple and safe technique for creating color contrast.

Accent

A color scheme based on an accent color typically indicates that there is a specific focus within the data, while everything else is secondary or neutral. By using an accent color, you draw the reader’s attention to a specific element in the chart.

The accent color should be distinct, often brighter or more saturated. The secondary color, on the other hand, is neutral and sometimes lighter, but still distinguishable from the background. A simple way to create it is to take the accent color with reduced saturation and perhaps slightly increased lightness. This creates a good balance.

The secondary color doesn’t always have to be a neutral gray. In fact, there can be several secondary colors. This is often necessary when there’s a clear leader, and everything else is secondary but still needs to be identifiable as separate categories.

Qualitative

A qualitative scale preserves the differences between colors. It’s typically used to represent categories, but not exclusively. Creating this type of scale usually presents the greatest challenges, but we’ll try to cover all the nuances and tips that will help you tackle it.

Range of hues

Using the entire spectrum of hues is usually the simplest way to create a qualitative palette. This produces colors that are easy to distinguish by hue. The farther apart the first color and the final color are on the spectrum or color wheel, the greater the difference between them and, accordingly, the greater the difference between the intermediate colors.

It also often works well if the endpoints differ in warmth e.g. one warm, the other cool or in lightness — one light, the other darker. This way, the palette will have a wider range of colors.

When creating a qualitative color palette, you may notice a number of characteristics. Sometimes changing the order makes the scale more visually balanced. For example, when we arrange red, orange, and yellow in sequence. This immediately establishes a sense of organization and creates pleasing combinations. Arranging cool colors in a row also yields an interesting result. You can make blue the first color, followed by a group of reds — this is a very versatile and reliable option.

Adding brown shades to the palette provides good contrast if you need a wide range of colors or if you need to enhance the harmony by replacing an unsuitable color.

It’s also worth keeping in mind that certain adjacent color combinations can be difficult to distinguish, such as purple and blue, or green and blue. They are often hard to tell apart, especially in small marks.

Almost any shades of green with the same saturation are difficult to distinguish when placed next to each other.

For example, you can adjust the lightness of the greens to achieve greater distinguishability.

Related

Using related colors — sometimes called “paired” colors — is a technique that allows you to create a varied yet harmonious color scheme. Typically, this involves adjacent colors that are nearly the same hue but have different levels of lightness and saturation.

Such scales provide clearly distinguishable categories while using fewer hues, preventing the chart from becoming overly bright and rainbow-like.

Themes

Creating a color palette based on a specific theme is my favorite approach. It not only yields harmonious combinations but also tells a story and sets the mood for the visualization. For example, the “space” theme unites cobalt, ultraviolet, magenta, and stardust tones through a shared character, while still offering distinct and varied shades.

These palettes work especially well when the data itself suggests a narrative. For example, data related to water and the sea evokes a “marine” theme.

Themes don’t necessarily have to be tied to a meaningful narrative; they can simply be based on cool or warm colors, which also provide a good distinction.

However, cool and warm palettes should be used with caution, as they tend to indicate relatedness rather than true distinction. Therefore, they are unlikely to work well in small and delicate chart elements such as dots and lines.

Soft

Sometimes, if a chart contains large filled elements — such as an area chart or a treemap — soft or even pastel colors work better than bright, saturated ones.

In large filled areas, the differences between elements will be clearly visible when using light colors. At the same time, soft colors generally work better alongside each other due to their overall low saturation, so it’s easier to select harmonious colors for greater visual cohesion.

Tools

You can check out my Data Color Tool and try creating all the color schemes described here. This will help you get a feel for the differences between the palettes and test them right away on actual charts.

You can also use a different tool if that’s more convenient. In any case, selecting a color palette isn’t always an easy task to do manually, so if it’s possible to automate the process, it’s better to create algorithms for generating palettes and apply them.

Building a palette

Let’s say we need to create a chart showing the trends in trips by different modes of transportation over a calendar year. I don’t start by choosing a color palette; first, I study the data and try to understand what it reveals and what type of chart it suggests. In our case, the data clearly shows the total number of trips, with each category’s share changing over time. Therefore, a stacked area chart is the right choice here.

Yes, seeing the data in this format confirms that this is a good solution. By the way, using grayscale at the beginning is a great way to avoid getting distracted by colors and stay focused on the data and the chart format.

Now let’s try to select colors for the palette. Let’s start with the most obvious ones: blue, red, green, and yellow.

Not quite. The chart looks visually heavy, especially in this format with large solid-color areas. The colors don’t create any visual coherence. Each color looks distinct on its own, but when blue and red are placed side by side, they appear as a single mass.

Let’s try to think about associations

• Walking — Warm terracotta: earth, paths.
• Bicycle — Vibrant green: outdoor activity, connection to nature.
• Public transit — Deep blue: urban infrastructure, organized route network.
• Car — Gray with a hint of purple: metal, asphalt, technology.

The idea of associations isn’t bad in itself; it helped with color selection and could be a good direction to pursue and develop further if we try to make the colors work together more harmoniously. But in our case, I don’t see the need for color-based associations. In fact, they don’t add much here. So we should keep looking.

Let’s think again about the data and what it looks like. We can see that there is “Car” category whose number of trips remains almost constant. All the others show clear periods of volume growth. This gives us a direction: we could try making “Car” stand out with a distinct color, while using related shades for all the others

Yes, this is definitely what we need. This solution helped us achieve several goals at once: all the colors are easy to distinguish in large filled areas, yet they are harmonious thanks to the shared character of three of them, and there’s an interesting accent that isn’t random and helps draw attention.

We created visual coherence and were able to not only convey the overall story in the data but also subtly highlight its unique characteristics. The reader will immediately notice that the number of car trips remains fairly stable throughout the year. This makes the chart very quick to read and easy to understand.

Building a color palette isn’t always a linear process. Sometimes we take a step back to look at the data or the chart from a different angle. You need to try different approaches, rather than simply forcing a random palette — or your existing “one-size-fits-all” palette — onto the chart.

A real-world check

Working on a color palette doesn’t end with simply applying it to a visualization. It’s also important to check how it performs in real-world environments and how accessible it is. At the very least, it’s worth testing the palette with color vision deficiency simulations.

In these tests, it’s important to assess whether the elements remain distinguishable, whether they can be matched to the legend, and whether the accent remains clear. If colors are too similar and difficult to distinguish, consider choosing different colors or using other means of differentiation. For example, labels, area borders, or additional ways to denote series, such as overlaying patterns, can help with comprehension.

It’s also a good idea to check for things that aren’t immediately obvious, such as when one of the colors accidentally takes on the role of an accent, even though that wasn’t part of the original intent for the chart.

And, of course, it’s worth taking a close look at how easy it is to tell the colors apart in the legend’s small markers. Test how the chart looks against the actual background where it will be used. Do all the colors harmonize with the background and remain clearly visible against it?

Even if you’ve created a palette that’s perfect by all functional criteria and incredibly harmonious to boot, don’t rely solely on color. The chart’s form, the data itself, labels, and annotations — these are what make a chart readable. But a visually coherent and balanced palette certainly makes the chart’s overall composition feel complete and polished.

P.S. Check out my Etch.js chart library — it comes with well-thought-out default styling settings that make the charts visually appealing and provide a good starting point for further experimentation with the color palette and data.

Originally published at https://imperavi.com.

How I build color palettes for data visualization was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.