Color Palettes

15 named palettes designed for data journalism. Every categorical palette has a colorblind-safe variant. Sequential and diverging palettes are built on perceptually uniform color scales from d3-scale-chromatic.

Categorical

For distinguishing discrete series. The newsroom palette is the default.

newsroom

colorblind safe

#1a6faf

#c73a27

#2ca25f

#e07b17

#7b3f9e

#c2a600

#5e5e5e

#2cb0c0

politics

print safe

#1473b8

#c0392b

#888888

politics-a11y

colorblind safe print safe

#0072b2

#d55e00

#999999

finance

#2ca25f

#c73a27

finance-a11y

colorblind safe print safe

#009e73

#d55e00

Sequential

For ordered data — choropleths, heatmaps, single-variable intensity.

blues

reds

greens

oranges

purples

grays

Diverging

For data with a meaningful midpoint — vote margins, temperature anomalies, z-scores.

redblue

redblue-a11y

colorblind safe

warmcool

colorblind safe

Print

Grayscale palette auto-applied via @media print or colorMode="print".

print-bw

Dash Patterns

Line charts render both color and a unique dash pattern per series. This ensures lines are distinguishable in print and for colorblind readers without relying on color alone.

Series 1 (solid) none

Series 2 6 3

Series 3 2 3

Series 4 6 3 2 3

Series 5 10 3

Series 6 2 3 6 3

Series 7 10 3 2 3 2 3

Series 8 4 3

Usage

<!-- Named palette -->
<LineChart data={data} title="..." palette="politics" />

<!-- Colorblind-safe mode -->
<LineChart data={data} title="..." colorMode="colorblind" />

<!-- Custom colors -->
<LineChart data={data} title="..." palette={['#e41a1c', '#377eb8', '#4daf4a']} />

<!-- In code -->
import { getPalette } from '@graphics-templates/core/color';
const colors = getPalette('newsroom', 'default', 'categorical', 4);