Chart & Data Visualization Color Palette Generator

About the Chart & Data Visualization Color Palette Generator

Make chart and map colours that work: for sequential data (low to high), diverging data (either side of a middle) or categorical data (groups), with 2 to 12 classes. Start from a proven scheme — the ColorBrewer schemes made for maps, the perceptually uniform viridis family (viridis, magma, inferno, plasma and the colour-vision-optimised cividis) or the Okabe–Ito colours of Color Universal Design — or enter your own colours and let the classes be interpolated in OKLCH.

Every palette is checked as you change it: how far apart the classes stay for people with protanopia, deuteranopia and tritanopia (simulated with the Machado, Oliveira and Fernandes model) and in greyscale, whether lightness runs in order, and which colours are too pale against your chart background. You see the palette on a bar chart, a line chart, a doughnut and a tile map, and get its values. With a pass the palette comes out as code for JavaScript, D3, Python and matplotlib, R or CSS, and as a legend image. Everything runs in your browser.

Common uses

• Choosing colours for a choropleth map, a heat map or a dashboard that must work for colour-blind readers.
• Checking a brand’s chart palette before it goes into a reporting template.
• Getting matplotlib, D3 or ggplot colours as code instead of copying HEX values one by one.
• Testing whether a palette survives a black-and-white print or a dark dashboard background.

Which type of palette

• Sequential for ordered values with no special middle: population, sales, temperature. Light means low and dark means high (or the reverse on a dark background); the lightness should change steadily.
• Diverging for values either side of a meaningful middle: change from zero, above and below an average. Two hues run out from a light middle, and both arms should match in lightness.
• Categorical for groups with no order: countries, products, parties. Colours differ mostly in hue, and need to stay far apart, because each one has to be matched with a legend. The more categories, the closer the colours get; with many, label directly or group small ones.

How the colour-blind check works

The palette is converted the way people with full protanopia, deuteranopia and tritanopia would see it, with the physiologically based model of Machado, Oliveira and Fernandes, and in greyscale. Then the page measures the distance, ΔE OK in the OKLab colour space, between the classes that must be told apart: every pair for categorical palettes, neighbouring classes for sequential and diverging ones, and, for diverging palettes, matching classes of the two arms (the first and the last, the second and the second-to-last …), which must not look alike or low and high values are confused.

The rating is this page’s own rule of thumb, based on CSS Color 4’s just-noticeable difference of 0.02: categorical pairs are good from 0.10 and fair from 0.05; neighbouring classes good from 0.06 and fair from 0.03; diverging arms good from 0.05 and fair from 0.03. The overall rating is the worst of the three deficiencies. For ColorBrewer schemes the page also shows ColorBrewer’s own rating; the two mostly agree.

Lightness and contrast

Lightness carries the order of a sequential scale, and the simulated deficiencies change it little, so the lightness bars show whether the order holds for everyone and how even the steps are. Diverging scales should have arms of matching lightness. In greyscale (a black-and-white print, or achromatopsia) only lightness is left, which is why the two arms of a diverging scale look the same there.

WCAG 2.2 SC 1.4.11 asks for a contrast of at least 3:1 for the parts of a chart people need to see. Pale classes on white (or dark ones on a dark background) fall short: use them for filled areas next to darker ones, add outlines, or label the values.

Where the colours come from

• ColorBrewer: this product includes color specifications and designs developed by Cynthia Brewer (http://colorbrewer.org/). The schemes, by Cynthia Brewer and Mark Harrower of The Pennsylvania State University, are used under the Apache License 2.0. ColorBrewer publishes 3 to 9 classes (sequential), 3 to 11 (diverging) and up to 8, 9 or 12 (qualitative); other numbers of classes are interpolated in OKLab along its largest set, and the page says so.
• viridis, magma, inferno and plasma: designed by Stéfan van der Walt and Nathaniel Smith (viridis with Eric Firing) for matplotlib, released under CC0. cividis, optimised for colour-vision deficiency, was designed by Jamie Nuñez, Christopher Anderton and Ryan Renslow; the page uses the d3-scale-chromatic approximation of it.
• Okabe–Ito: the eight colours of Masataka Okabe and Kei Ito’s Color Universal Design, with the RGB values they publish; black is listed last here.

Limitations

• The simulation shows full dichromacy, the strongest form of each deficiency. Most colour-blind people have a milder anomalous trichromacy and see more difference than shown; monochromacy is rare.
• The ratings are a rule of thumb for screen colours, not a guarantee: line width, area size, labels and the colours around the chart all change how well classes can be told apart.
• The sample charts use made-up data to show the palette in use; they are not charts of your data.
• In the free preview the values table and the code show their first half, the sample charts carry a watermark and the exports stay locked.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.