How to design a useful (and fun!) color key for your data visualization

The goal of a color key — also called a color legend — is to help your reader figure out as quickly as possible what the colored elements in your visualization mean. A carefully designed color key can mean the difference between readers glancing at your visualization and deciding it’s too hard to figure out, and readers actually reading it.

In this article, I’ll explain how to create useful, truthful, easily skimmable color keys for categorical and quantiative color scales. We’ll start with simple tricks and end with a collection of complex, clever, and fun color keys.


1 Make sure you actually need a color key

2 Making a categorical color key as readable as possible
Use grids and groups
Structure long items
Use form, not just color
Sort your color key items

3 Making a quantitative color key as readable as possible
Consider skipping classes
Add axis ticks
Consider not showing values
Design your color key like your visualization
Make interpolations obvious
In diverging color scales, make uneven extremes obvious

4 A big collection of great color keys
Color keys that give additional information
Color keys that show the distribution of the data
Color keys with unusual forms

Two disclaimers before we start. First, this article won’t talk about which colors to use in your visualizations. Instead, it’s about making color keys easier to understand for your readers. To learn how to choose better colors, visit our articles:

Second: You might be here to learn how to use color keys in our tool Datawrapper. When creating a visualization in Datawrapper, color keys are shown by default:

Datawrapper choropleth map, symbol map, donut chart, and scatter plot

But you can also design your own color key in Datawrapper, either with HTML in the chart title, description, or notes, or by using text annotations:

Datawrapper column chart, scatter plot, line chart, and locator map

For a practical guide, visit our Academy articles How to create text annotations, How to turn your title into a color key and How to create a custom color key.

Let’s start with ideas for designing better color keys:

Make sure you actually need a color key

Your readers won’t know what a color indicates if you don’t explain it to them. But that explanation doesn’t need to happen in the form of a key. You might be able to use direct labels instead:

The Economist, 2023 Line charts are one of the chart types that’s easiest to label directly. If the lines are too entangled, little pointers can help, like the one leading to the “Hispanic” line .
The Economist, 2023 Here, thicker bars are used to fit information about both the category and the value. The chart shows three ways of labeling: In the bar, below it (“Other”), and next to it with a pointer
The Washington Post, 2023 Maps are not often directly labeled, but this one attempts it. It helps that the article shows another chart a little bit above the map that gets readers used to the colors.
Datawrapper has direct labels as a built-in option for chart types like range and arrow plots, line charts, and stacked column charts. In many other chart and map types, you can add text annotations to achieve the same effect.

Making a categorical color key as readable as possible

When different colors represent different named categories — like blue for wind energy and yellow for solar — you’re looking at a categorical color key. Here’s what to pay attention to when designing these keys:

Use grids and groups

It might be tempting to fit your color key items into as few lines as possible. This takes the least space, but only works for a few, short items. If your key has lots of items, or you need a lot of letters to describe them, it can become overwhelming. If this is the case, consider using a grid layout — it’s easier to skim and looks tidier.

Bloomberg, 2023 A lot of long labels are best shown in a grid.
The Economist, 2023 In this chart, the designer had a lot of space to fit the short color key items next to each other — but decided on a sleek grid anyway.

If you can group your color key items, that’s even better: 

(Please don’t start a conversation with me about whether nuclear energy is renewable or not…) 

Structure long items

If your color key items are fairly long, the first thing you should do is attempt to rewrite and shorten them. You can find more information in our article What to consider when using text in data visualizations.

You can’t shorten your labels? Then consider putting each item on a separate line.

A grid is possible (and potentially more space-efficient) for long items too, if you introduce line breaks:

For better readability, make these longer items left-aligned, choose a legible font, and don’t go all uppercase as I did here — lowercase letters are easier to read.

Use form, not just color

If your colored elements have different forms (thick lines, thin lines, dashed lines, rectangles…), then showing these forms in the color key is an excellent way to help readers quickly find them in the chart.

You’ll see that often in locator maps, like this one:

El Confidencial, 2022 The map uses only two hues (pink and yellow ), but makes use of hatching and strokes to mark four distinct zones.

Datawrapper does this by default for locator maps, lines in line charts, and confidence intervals in column and bar charts:

Sort your color key items

Another little trick is to place your colors in the same order in both key and chart. Readers who are used to reading from left to right will first want to know what the color in the top left of the chart represents, so it should come first in the color key too.

That’s only true if your colored elements are all the same size, though. If your colored elements are of different sizes (for example, in a pie chart, categorical choropleth map, or bubble chart), consider displaying the “biggest” color first in the key, then the second biggest, the third biggest, and so on.

And forget all this if your categories already have a natural order — like “left, center, right,” or “good, ok, bad,” or “2015, 2020, 2025.” This natural order should be the order of the items in the color key. Here’s how to make such quantitative color keys work:

Making a quantitative color key as readable as possible

When designing color keys for sequential and diverging color scales, consider these design decisions to make them easier to understand: 

Skip classes

How many values should you show on your color key? For classed color scales, the answer may seem obvious: Let’s label as many values as there are classes! But if you have a lot of classes, showing values for all of them is often not the best choice. They may overlap, and your color scale may look too busy to invite the reader’s eye.

Instead, if the borders are obvious, consider skipping every other class. Here are some examples:

ZEIT Online, 2023 The designer decided to use fine-grained color classes (10-12.5°C, 12.5-15°C, etc.), but only label the most important values — 10, 20, 30, and 40°C.
The Economist, 2023 This smart color key labels the broad categories for how democratic each country is, but still shows nuances between them. It’s easy to see which country has a stronger or weaker “Authoritarian regime.”

The same is true for unclassed color scales: You can show lots of subsections, only a few of them, or only the min and max values (and, in case of diverging color scales, the center value): 

How detailed you should get depends on what you want readers to see in your visualization. Is it enough to give them a general trend, or are they supposed to read exact values? If the visualization is interactive, the exact values can also hide in tooltips. In static visualizations, err on the side of showing more values in a color key. 

Make sure to only label visibly distinct colors, though. In a highly interpolated color scale like the following, there’s no need to label both the “almost dark blue” and the “dark blue” — readers won’t be able to tell them apart anyway. 

The Washington Post, 2023 The difference between one, five, and ten feet of snow is more important than the difference between 25 and 30 feet — so the designer used more distinguishable colors for the lower end of the scale, and showed more value labels.

Add axis ticks

If you go for a continuous instead of a classed color scale, you might be tempted to label more values in your key. But there’s no need: You can add “axis ticks” to your color scale, even if you don’t label them. Note that this only works well if the ticks are spaced in a useful, predictable way.

Consider not showing values

You also can not show any values and units at all, just a general “less/more” or “worse/better.” If your chart is based on a metric that needs lots of explanation, might confuse readers, and doesn’t add anything useful to their understanding, then a general trend might be sufficient — and increases the chances that your reader gets the general idea.

This is more common than you might think. I’m going to show you a whole bunch of examples to encourage you to consider this simplification the next time you label a color key:

Wall Street Journal, 2023 “Smoke density” and “active fire intensity” sound complicated. The designer decided to not bother readers with values and units — for them, it’s just important to know where there was “less” and “more” of each.
The Washington Post, 2023 You can go one step further and only label one site of the gradient, as the designer does here. An arrow helps to read the color key.
SRF, 2023: Labeling a general trend works for classed color scales too. The visualization is complex enough, so the color legend is simple: The surface temperature (“Oberflächentemperatur”) is just cooler or hotter .
San Francisco Chronicle, 2023 Here, the reader will see the exact values as soon as they search for or hover over a specific county — so there’s no need to clutter the color key with lots of numbers too.

Design your color key like your visualization

If you have special elements in or around your colored regions, consider including them in the color key too.

For example, if the colored data points in your visualization have outlines, use outlines in your color key. This is more than just an excellent way to increase the accessibility of your brightest colors. Colors appear differently depending on their stroke, so an outline in both visualization and key will make it slightly easier for your readers to match the colors. 

Make interpolations obvious

If your color scale makes use of non-linear interpolations, communicate them well. In the example above, the first and last classes are much bigger than the others — but readers won’t know that unless you tell them. Label the min and max values in such a case.

Bloomberg, 2021 The range each class covers doubles with every step, so it’s important that the designer included a “0” label (otherwise readers might assume the scale begins at $500) and added the “…and up” (otherwise readers might assume that the blue top range only goes up to $16k).

If your classes are consistent, labeling the min and max values isn’t necessary, but it does remove any doubt readers might have about your color key:

An elegant approach is to give your color key classes different widths depending on the range they fill:

When space permits, this makes your color key look more interesting and communicates your interpolation nicely. Win-win! 

Urban Institute, 2023 The high priority regions in this map deserve more distinction, so the designer added classes for increasingly smaller ranges the more the index goes up . It’s easy to spot this in the color key — half of the whole width just covers the lower “0-50” range .

In a diverging color scale, make uneven extremes obvious

If the extremes in your diverging color scales don’t cover the same range from the center, make that obvious in both colors and color key. If your center is closer in value to one extreme, it should also be closer in the design of the key.

Axios, 2021 Here, the right side of this color key (from +10 to +100%) is double the length of the left side. (Also, I really like the left and right arrows directly in the bar!)
Washington Post, 2021 The negative side is only 5°F “bigger” than the positive side — but still, the designer found it important to mirror that in the design.

A collection of great color keys

Enough with the explanations; let’s look at some more great examples! Here you’ll find lots of smart color keys that people have told me about and that I’ve stumbled upon over the past few years. Let’s begin with the ones that show extra information:

Color keys that give additional information

The Washington Post, 2023 What a great color legend: Not only does it explain the difference between a tropical storm and a hurricane, but it also gives us the exact mph ranges for different hurricane categories — and shows us that these ranges are not all the same size (e.g., category 2, from 96 to 111 mph is bigger than category 4, from 130 to 157 mph ).
Financial Times, 2023 Showing two metrics in one color legend? Smart! This one shows the values in both Fahrenheit (for U.S.-American readers) and Celsius (for almost everyone else).
CNN, 2023 Labels for color legends are often placed around them. CNN puts the extra explanation in the legend, and introduces two categories there too (“Very high heat stress” and “Extreme”).
The Washington Post, 2023 This isn’t just a color key, it’s also a portrait gallery. A great way to let people recognize the candidates for Speaker of the House.
Marian Eerens, 2021 This color key does a lot of things: It explains how to read the chart (see the arrows left and below the key), but also displays what the categories contain (“Fossil – Gas, Lignite, Hard Coal, Other”). I especially like that the key also shows the total share of each category (“Fossil – 37,4%”).

Color keys that show the distribution of the data

National Geographic, 2015 I’m a big fan of color keys that also function as histograms. They answer the question: How much does each class actually show up in the data? This color key does that super well, even summarizing shares for two metacategories (“Traditional neighborhood” and “Urban prairie/naturescape”). Andy Kirk describes its genius in detail here.
The Opportunity Atlas, 2018 This beautiful color key only appears in the mobile version of The Opportunity Atlas. The colors of classes that are very sparsely represented are hard to see here, showing a possible downside of the “histogram as color key” approach. An extra color key below the histogram could have helped.
Damola Ladipo, 2022 Here, that extra color key next to the histogram was added, making it easy to see the colors of classes even if very few counties fall into them., 2021 Histograms are not the only chart type to show distributions. This one is called a beeswarm plot, showing a dot for every single election district.
Axios, 2022 More common to show distributions below or above color keys are strip plots, since they need little vertical space. Note how this color key uses an interpolation that places roughly the same number of counties in each class.
Cédric Scherer, 2021 This is a combination of a sequential and categorical color scale again (see above), plus a strip plot… of which some values are even labeled.
WEF Nexus Index Strip plots don’t need to be horizontal, as this map demonstrates. Showing the country flags in the color key as a hover effect is a nice touch.
ONS, 2021 Smooth density plots can also show data distribution. In this beta version, the designer displays lots of values: The share for all of England and Wales , for the City of London , and for the currently selected region .

Color keys with unusual forms

The Wall Street Journal, 2023 Labelling the classes of a quantitative color key can be tricky. Here, the designer decided to simply extend the middle category to fit the label. Differently wide classes could be confused with showing the distribution of the data — but here, it works for me.
John Nelson, 2016 This color key is also a “size key”: It explains to the reader what it means when a circle of some color is small or large.
Possible, 2022 A rounded color key? Why not! This key looks like a gauge and is lots of fun to interact with.
Radio Canada, 2016 Why stop there — here’s a completely cyclical color key. It takes time to learn how to read it, but the choice of colors (blue for night, yellow for noon, orange/aubergine for evening) help a lot. You can find more cyclical color scales here.
The Guardian, 2022 This map combines a quantitative (<10% ,10+, 20+, 30+) and categorial (Macron, Le Pen, Mélenchon) color scale. The color key reflects that with a neat little grid.
Jess Hepburn, 2022 Sometimes, the colors of categorical color scales are explained through text colors, e.g., in the title. Jess goes one step further and uses text colors to explain a sequential color key — fun.
Devin Lea, 2023 Color keys can take any form you want. This Avo-key-do takes time to understand — but it’s a lot of fun to do so thanks to the shape and labels.

Thanks to everyone who helped me find great examples! A special thanks to the people whose submissions I ended up including: Rob Fry, Jacque Schrag, Víctor Pascual Cid, Ahmad Barclay, Marian Eerens, Dennis Kao, Alexei S., June Choe, Nicholas Kruchten, Michael Neutze. You made this article more interesting.