Color themes
For all themes, brand, foreground, background and text colors are provided in varying strengths, to meet different background contrast requirements.
All colors are defined separately for dark and light environments. The dark theme can be used in low-light conditions or to highlight particular sections of a page, e.g. a hero chart.
Try switching themes here:
Category colors
The colors for nominal data are based on the WHO 2021 brand colors. They were adapted to make them perceptually suitable for data visualization and fully accessible.
Specifically, the category colors fulfill the following requirements:
- Colorblind-safe, tested for the most common types of color vision.
- Nameable, to be distinguishable and easy to refer to verbally.
- Equally salient, with comparable brightness and saturation.
- Sufficient background contrast on both light and dark backgrounds: To fit colors to different sizes of text and visual marks, all colors come in various strengths for different background contrasts.
Hue
Chroma
Luminance
Special categories
In addition, specific mappings of colors from the generic color pool for common categorizations in the WHO domain are provided.
Tap/click to expand the sections on the right
Region colors are chosen from the category colors to best match the classic WHO region colors for easy recognition.
Sequential scales
Sequential color scales can be used to encode quantitiative metrics of either positive or negative values.
We provide both single-hue and multi-hue color scales to choose from. While in single hue scales, value progressions are the most clear, multi-hue scale produce more namable colors that can be more easily referred in text.
All sequential scales are defined by color stops. Colors in between the stops are interpolated in the LAB color space, which represents human perception better than e.g. RGB or HSL spaces.
They harmonize with the category colors and fulfill the following criteria:
- Perceptually uniform decrease in lightness and increase saturation towards higher values (inverse for dark backgrounds).
- Colorblind-safe tested for the most common types of color vision.
- Sufficient lightness range, to make values easy to read.
- Versions for dark backgrounds with inverted brightness contrast.
Hue
Chroma
Luminance
Hue
Chroma
Luminance
Hue
Chroma
Luminance
Hue
Chroma
Luminance
Hue
Chroma
Luminance
Hue
Chroma
Luminance
Diverging scales
Diverging scales can be used for quantitiative data that contains both positive and negative values. Depending on use case, it can be more appropriate to place zero at the center of the scale, or to the median. Like sequential scales, diverging color scales are interpolated in LAB space between defined stops.
Diverging scales fulfill the following criteria:
- Blend over a neutral color — close to the background — in the center.
- Perceptually uniform increase in saturation and decrease in lightness towards both ends of the scale (inverse for dark backgrounds).
- Colorblind-safe tested for the most common types of color vision.
- Sufficient lightness range, to make values easy to read.
- Versions for dark backgrounds with inverted brightness contrast.
Functional colors
Functional colors are used to highlight elements and indicate particular value types.
Selection fill and stroke colors are used to highlight elements which are focussed or accentuated by editor or user selection. In contexts, where multiple selections are possible, category colors are used for identifiying selections across charts (see Interaction).
Generally, selection colors come in two strengths, with the stronger version ensuring a contrast of at least 3:1 to the background color. Selections are further emphasized using an outline in the selection stroke color, which can be used in combination with the selection colors or without them, if color is used to encode data in the chart.
In addition, our system provides a color for elements that are filtered out. Colors for value types are often used together with other visual decorators, such as outlines or hatching. These styles can for instance indicate projections or holes in the data (either due to reporting issues or because countries are deliberately not part of a dataset).
Design tokens
These color definitions are available as a download in the form of design tokens for a variety of languages. Let us know in case you miss an output format and we can look into providing it.