Colour
The guide uses two separate sets of colours:
- Brand colours for text, titles and page elements. They tie a visual to the product it sits in.
- Data colours for the data itself: bars, lines, areas, points and map fills. They come in three forms:
- Categorical, for categories without an order
- Sequential, for ordered values
- Diverging, for values on either side of a meaningful midpoint
Brand colours are too few and too similar to encode data, so the data colours were built separately to meet those needs.
All colours are also in the interactive colour picker, which lets you copy hex codes, build ramps and export CSS variables.
Brand colours
#1C6758#335252#191919#F3F3F3Neutral shades
#ECECEC#B8B8B8Which colour for which element
| Element | Colour |
|---|---|
| Title | Black, or Dark Teal for a branded header |
| Subtitle, labels, axis values, source and notes | Black |
| Background | White, or Light Grey for panels and cards |
| Gridlines | Platinum |
| Axis lines and tick marks, where used | Steel |
| Data that isn’t the focus (“other”, context, “no data”) | Steel |
| Data | Data colours, starting with Teal |
| Text on a coloured fill | Black or white, whichever the swatch shows |
| Status: on track, watch, off track, completed | Baltic, Jasmine, Cherry and Sky, always with a sign and a word. See status colours |
Rules for every visual
Use as few colours as possible. Start with one colour, plus Steel for everything that isn’t the story. Add colours only for real categories.
Never rely on colour alone. Label directly, or add position, shape or line style, so that the visual still works in greyscale, in black-and-white print and for colour-blind readers. Roughly 1 in 12 men has some form of colour-vision deficiency.
Be consistent within a product. The same category always gets the same colour, and colours are always added in the colour order.
Don’t use red and green as the only positive/negative signal. If you have to, use them sparingly (an up or down arrow on a big number, say) and always pair them with a + or − sign.
Building your own palette? See Build your own palette. It starts from the colour-blind-safe Okabe–Ito palette, which you then shift towards your brand.