Reuters Graphics Colours
A working colour system for Reuters Graphics charts
The Reuters Graphics colour system gives each palette a specific job: telling categories apart, showing quantity, showing change either side of a midpoint, and keeping context separate from the focus of a chart.
Current 60 swatches
Graphics palette 36 swatches
Show panel as table
| Group | Colours |
|---|---|
| Default |
|
| Default |
|
| Locator Maps |
|
| US politics |
|
| BreakingViews |
|
| ROI Commentary |
|
Pick the palette that matches what the colour is doing. Use the preview controls to inspect colour-vision simulations, greyscale and dark backgrounds. Check the actual marks and labels: a simulation or distance score alone does not establish readability, and a greyscale preview is not a print proof.
Colour palettes
Click any hex to copy it.
Graphics Primary
Six colours for unordered categories: rust, blue, teal, plum, green and yellow. Use them in order, with direct labels or other visible cues where colour alone would make the series difficult to identify.
Graphics Mono
Seven neutral steps, white to near-black, approximately evenly spaced in lightness. #666666 and #404040 are the design system’s greys, and the dark end is TR Graphite.
Graphics maps
Twelve colours for a map: label inks, five area fills, two emphasis colours and two highlights, named by the job each does. The water label ink is the categorical blue, so a map and a chart on the same page agree. Land, water and green are for drawing a base map yourself, from OSM or Natural Earth, in the style of published Reuters maps. Datawrapper's Locator Maps group carries seven of them; the neutral fill is left out because it is already grey 100 in the Mono group, the three base-map fills because Datawrapper's basemap already draws them, and the dark highlight because it is already the categorical plum.
US politics
Seven colours for election results, taken from the US election components theme so a Datawrapper chart matches the live results pages: a win and a flip for each of the three parties, and one tie colour shared by all of them.
Graphics patterns
Six textures for maps, drawn over a fill to mark a shape's status rather than
its value. They are SVG fills: mount <Patterns /> once on the page, then set
fill: var(--gfx-hatch-pattern) on a shape. Each pattern carries a grey and a
white ink, so the same variable works over light and dark fills.
Hatch Disputed or contested territory.Dots Provisional or partial data.Cross-hatch No data, where a blank shape would read as zero.Reverse hatch Excluded from the analysis, or not applicable.Sparse hatch Projected or forecast. Also the forecast tail of an area chart.Sparse dots Estimated or modelled rather than measured.Derived colours
The scales use the six categorical colour families. Single-hue ramps include their exact categorical colour; these rows are highlighted and labelled Categorical. Two-hue sequential ramps share their lightest stop with yellow step 100 and their darkest with the destination family's step 900, and diverging scales share a cream midpoint and take each extreme from a single-hue step 800 — all labelled Same as in the tables. Their interior shades are not tied to exact categorical colours. Each scale has nine steps. Pick a colour family to see its scales, or show all twelve.
Sequential ramps carry a quantity from pale to dark. Two-hue ramps also change hue along that progression. Diverging scales join two ramp families at a shared pale midpoint, with matched lightness on either side.
2 of 12 scales
sequential-rust
diverging-blue-rust
Usage
These are planned distribution formats. This project currently defines the values as TypeScript arrays and CSS custom properties; it does not yet supply an Adobe swatch file, QGIS palette or installed Datawrapper theme.
The component library
The palette becomes part of @reuters-graphics/graphics-components: the
categorical six, the nine-step ramps and the diverging scales, as SCSS variables
and CSS custom properties — --gfx-rust-600, --gfx-div-yellow-blue--400 — and as
arrays to pass straight into a chart component.
Adobe swatches
An .ase swatch library for Illustrator, Photoshop and InDesign, so ai2svelte
graphics and anything built for print start from the same values rather than
eyedropping them.
QGIS
A .gpl palette for the six categorical colours, plus the sequential and
diverging scales as importable colour ramps. A choropleth built in QGIS would
use the same colour stops as the other tools. Data-bin boundaries remain a
chart-specific choice; the colour stops are not an evenly spaced lightness grid.
Datawrapper
Four sets in the custom theme: the categorical six for series colour and the grey ramp for everything that isn't the point of the chart, both unlabelled as the default palette, plus two labelled groups, Graphics maps and US politics. The sequential and diverging scales come from the same colours as theme gradients, which Datawrapper steps and bins per chart.
Category separation
Colour differences need to hold up in the marks a chart uses, not only in a row of large swatches. The seven-colour Datawrapper set below includes an orange/red pair and two blues that deserve particular attention in small marks and overlapping lines.
Compare the same data and renderer with each palette, then inspect the colour-vision and greyscale previews. Use labels and other visible cues where a reader might otherwise have to rely on a subtle colour difference.
Current — 7 series
The orange/red pair and the two blues are useful comparisons at small mark sizes.
Seven colour swatches from the existing Datawrapper palette.
Seven G7 bond yield series drawn in the published seven-colour Datawrapper palette.
Comparing palettes
These figures describe the closest pair in each palette under normal vision and a deuteranopia simulation. Larger CIEDE2000 distances indicate greater modelled colour differences, not an accessibility pass or fail. Mark size, background, overlap and labelling still matter.
The lightness gap describes the closest two shades in a greyscale preview. Graphics Primary is not evenly spaced in lightness, and its narrowest gap is between rust and blue. Use direct labels, marker shapes or line patterns where a narrow gap could obscure the information.
| Palette | Normal | Deuteranopia | Lightness gap |
|---|---|---|---|
| Current 7-series | 10.8 | 6.0 | 3.2 |
| Graphics Primary | 22.1 | 13.3 | 5.5 |
| Tableau 10 | 22.1 | 0.7 | 1.8 |
| Okabe-Ito | 21.7 | 11.5 | 0.8 |
Note: CIEDE2000 distances use CIELAB D65 and the Machado et al. (2009) severity-1.0 simulation. Reference rows use the six colours shown. These are diagnostic comparisons, not universal thresholds.
Colour palettes in action
These examples recreate charts Reuters has already published, retaining their data and showing the original colour assignments beside the Graphics palette. Most use the same renderer; the stacked-area example also reorders bands, and the locator restyles its current basemap. Use the preview control at the foot of the page to inspect colour-vision simulations and greyscale.
1. Categorical
For unordered categories. Use the six colours in order: rust, blue, teal, plum, green and yellow. A two-series chart gets rust and blue. The colours vary in lightness, but do not occupy evenly spaced shades.
The first five have at least 3:1 contrast against white. Yellow has 2.09:1; where its boundary carries essential information, use a contrasting outline or equivalent labelled values. Nominal contrast alone does not make a thin or antialiased mark readable.
Check the categorical colours against the actual dark background, where the ranking reverses. Plum is the darkest colour in the set: it is strongest on white at 7.52:1 and weakest on black at 2.79:1 — the only one of the six below 3:1 there. Against TR Graphite (#212223), plum is 2.12:1 and green is 2.61:1. Yellow, weakest on white, is strongest on black at 10.03:1. Where a boundary carries essential information on a dark chart, give it an outline, a direct label, or a lighter ramp step. Keep text labels in a contrasting neutral colour and add visible cues where needed.
Categorical
rust, blue, teal, plum, green, yellow
2. The grey ramp
The most useful palette here. Seven neutral steps running white to near-black, spaced approximately evenly in lightness so the intervals look regular rather than bunching at one end. Use it for ordered categories that aren't quantities, for the "Other" bucket, and — most often — for every series that isn't the point of the chart.
Greys for data
full white-to-black ramp, built on the TR brand greys
Focus and mute
One colour, everything else grey. This reads faster than six colours and works for any number of series.
3. Sequential
For quantities — choropleths, heat maps, anything low to high. All six ramps progress from pale, low values to dark, high values. They remain ordered in the colour-vision simulations; the number of useful bins still depends on the size and context of the marks.
Each ramp includes its exact categorical colour as a numbered stop, highlighted and labelled in the reference tables above. The other steps retain the shared lightness targets, with lighter tints and deeper shades on either side. Spacing around the categorical stop varies by family.
These ramps are intended for light backgrounds. Dark-background checks on the categorical set do not make every ramp endpoint suitable for a dark chart.
Blue
the default
Rust
warm alternative
Teal
cool alternative
Plum
pale lilac to near-black
Green
held at one hue, pale mint to bottle
Yellow
cream to olive
Two-hue sequential ramps
Each starts at the lightest yellow step and ends at its destination family's darkest step. The shades between them are free to differ from the categorical colours, so no exact categorical stop interrupts the progression.
The nine stops are evenly spaced in OKLab lightness before rounding to hex. Yellow–green and yellow–plum use a broad, smooth chroma profile; yellow–blue mixes through a subdued neutral rather than taking a vivid green and cyan detour. A gentle chroma lift adds up to 15% through the middle and tapers to zero at the ends, keeping the shared endpoints exact. Yellow–green runs through olive to bottle green; yellow–plum through peach and rose to deep plum; yellow–blue through straw and slate to navy.
All three darken in the vision previews. These are ordered scales, not diverging scales with a neutral midpoint. Choose the number of bins for the chart and check adjacent values at the size they will appear.
Yellow–blue
pale yellow through straw and slate to navy
Yellow–green
cream through olive to bottle green
Yellow–plum
pale yellow through peach and rose to deep plum
4. Diverging
For values either side of a meaningful midpoint — change, surplus and deficit, above and below an average. Four steps on each side meet at a shared pale midpoint. Both arms are built to the same lightness targets, so mirrored steps carry matching lightness and neither side is systematically darker.
Each scale is fixed at three points: the cream midpoint, shared by all three, and the two extremes, which are their families' single-hue step 800. The steps between are spaced evenly in lightness and carry one smooth chroma peak per arm, free to differ from the categorical colours.
Chroma peaks partway along each arm rather than at the extreme. That is sRGB, not a choice: at every one of these hues the gamut is widest around the middle of the arm and narrows towards the dark end.
Blue–rust is the house pairing, with blue–yellow and teal–yellow as alternatives. These three are the recommended pairings. Inspect both sides in the vision preview, especially their pale steps. A gain/loss pair of categorical colours does not automatically make a useful diverging scale.
Blue–yellow
blue and ochre, with matched lightness on either side
Teal–yellow
cooler negative side, with matched lightness
Blue–rust
the house pairing · blue and rust
5. Single-purpose colours
These are roles, not decoration. Fixing them means a reader learns them once across everything we publish.
- Focus
#cb643cThe one series the chart is about. - Muted
#adadadEvery other series. - Positive
#2a6e4dGain. Green, dark enough to read. - Negative
#cb643cLoss. Rust, not red. - No data
#f4f4f4Reserved for missing data; label or pattern where needed. - Annotation
#666666Annotations and reference lines.
6. Graphics maps
Twelve colours for a map, named by job rather than by hue: three label inks, five area fills, two emphasis colours and two highlights. Seven are existing palette steps — the water label ink is the categorical blue and the water fill is blue 200, so a map and a chart on the same page agree.
Land, water and green are for drawing the base map yourself. Land is the Reuters tile style's own, and water and green follow published Reuters maps: a pale blue sea, and a muted sage for parks and woods, set at the same lightness as the neutral grey so a green area never reads heavier than a grey one.
Red is the first emphasis colour and purple the second, for a separate set of places or events. Purple is darker than the red and stays clear of it and of the water blue in the colour-vision simulations.
The two highlights are emphasis fills: a light yellow that takes dark labels, and a dark plum, the categorical plum, that takes white ones. The plum is close to the purple emphasis in lightness and prints as the same grey, so keep purple marks off a plum highlight.
Two constraints. Red and purple marks need a contrasting casing over satellite imagery, where the background can vary sharply. Yellow is a fill or a cased mark, not an uncased thin stroke or its own label ink. Check contrast against the actual basemap or image rather than relying on a single background sample.
Graphics maps
three label inks, five area fills, two emphasis colours, two highlights
7. US politics
For race calls and seat counts. A flip is the darker shade of the winning party's colour, so a map reads as party first and change second. The tie is one colour shared by all three parties.
Independent win and tie are light — 2.26:1 and 1.49:1 against white — so labels on them go dark. Under a deuteranopia simulation, Republican win and independent flip share a lightness and look similarly brown; label independent flips directly.
US politics
win and flip for each party, one shared tie
Race calls by state
Wins, flips and a tie on a results bar and a tile map.
A bar counting states by result, from Democratic wins on the left to Republican wins on the right, above a US tile map coloured by the same seven results.
8. Patterns
For maps, where a shape has to say something colour cannot: that the data behind it is disputed, provisional or missing. A pattern sits over the fill rather than replacing it, so the shape keeps its value and the texture adds its status. Because it is geometry rather than hue, it survives greyscale print and all three colour-vision simulations unchanged.
Six textures, each with one job. Use no more than three on one map. Hatch and reverse hatch only work together on large, adjacent shapes; on small ones they read as the same texture.
Each texture is drawn in two inks, never a categorical colour: a #404040 line with a white line beside it, or grey dots with white dots between them. A pale fill hides the white and a dark fill hides the grey, so one pattern works over any fill. On mid-tone fills both show, and the texture reads slightly heavier. Density is fixed in screen pixels, so a hatch on an inset map is the same weight as on the main map.
- Hatch
--gfx-hatch-patternDisputed or contested territory. - Dots
--gfx-dots-patternProvisional or partial data. - Cross-hatch
--gfx-cross-patternNo data, where a blank shape would read as zero. - Reverse hatch
--gfx-hatch-back-patternExcluded from the analysis, or not applicable. - Sparse hatch
--gfx-sparse-hatch-patternProjected or forecast. Also the forecast tail of an area chart. - Sparse dots
--gfx-sparse-dots-patternEstimated or modelled rather than measured.
Federal funding per K-12 student
The same tile map with three status textures over the funding colours.
A US tile map shaded pale to dark blue by federal funding per student. Nevada, Oregon and Alaska carry a dot texture marking provisional figures, Texas and Florida a sparse hatch marking projected figures, and Idaho and Wisconsin are grey with a cross-hatch for no data.
Charts built with d3. Colour analysis checked against a published Sharma et al. CIEDE2000 test pair and the Machado et al. (2009) CVD matrices.