Jump to: Category Colors | Region Colors | Special Category Colors | Sequential Scales | Diverging Scales | Functional Colors | Pillar Colors | Chart Element Colors
Category Colors
The category colors have been chosen to maximize distinguishability. If you choose to distinguish categorical data by color in your chart, use the categorical colors in the specified order.
Only use category colors in charts where color is needed to distinguish your categories (e.g. to show distribution of different categories in a scatterplot or a beeswarm or to identify lines in a line chart).
Basic Category Colors
If you have fewer than 9 categories in your representation, use the colors in the order of their numbering. For instance, if you only have 4 categories in your dataset use cat1-4 to represent the categories to maximize distinguishability.
Text Category Colors
If you have fewer than 9 categories in your representation, use the colors in the order of their numbering. For instance, if you only have 4 categories in your dataset use cat1-4 to represent the categories to maximize distinguishability.
Region Colors
The region colors are based on the category colors above but are unique for each region.
When showing all countries in a dataset (e.g. in beeswarm or scatterplot) use the same region color for all countries of one region. If you are only showing selected countries that you want to distinguish by color (e.g. in a line chart), use the secondary region colors if you are showing more than one country from the same region.
Basic Region Colors
For country data that you want to distinguish by color, use the region colors of the country's region. If only one country is shown in a chart (e.g. line chart with a single line) you do not need to use the region colors.
Text Region Colors
When using region colors on text, always use the text region colors for sufficient background contrast.
Secondary Region Colors
Use the secondary region colors when you want to distinguish a few selected countries from the same region in a chart by color. For the first country always used the basic region color for the country's region. If you are showing more than one country from the same region, use the secondary region colors in the order of their numbering (e.g. nac for the first country, nac2 for the 2nd, nac3 for the 3rd etc.). If you are showing more than 4 countries from the same region together in the same chart, consider using another way of distinguishing the countries (e.g. through direct labeling).
Special Category Colors
Special category colors have been designed to show the most common dimensions and disaggregation in World Bank indicators, such as income groups, gender, age and urbanization.
When showing dimension/disaggregation together with a total, use the total color from functional colors.
Age Groups
Use the age group colors consistently across different age disaggregations. Youngest should be used for all age groups describing babies & toddlers, younger for age groups describing kids (school age), middle for younger adults, older for older adults and oldest for seniors.
Total
When showing disaggregations together with a total, use total color for showing the total values.
Sequential Scales
Sequential color scales can be used to encode numeric data by color. The style guide offers different color scales to choose from for different data characteristics. Sequential colors scales can be used on maps or other charts to encode numeric values without a clear midpoint (such a 0, median etc.). They can be used to calculated continuous color scales or used as discrete colors for value bins.
All color scales are based on research to make them perceptually uniform. This means the darkness and saturation of colors increase in perceptually equal steps towards higher values. All sequential color scales are further designed to be accessible for all types of color visions and feature a sufficient lightness range to make values easy to distinguish.
Bad to Good
This color scale works best when larger numbers signify more favorable conditions (e.g. labor force participation rate, access to electricity, GDP per capita).
Generate more color steps for this palette here.
Good to Bad
This color scale works best when larger numbers signify less favorable conditions (e.g. poverty rate, GHG emissions, prevalence of stunting).
Generate more color steps for this palette here.
Monochrome Blue
Monochrome scales can be used to achieve a more homogenous look. Pick from the options below.
Generate more color steps for this palette here.
Monochrome Yellow
Generate more color steps for this palette here.
Monochrome Purple
Generate more color steps for this palette here.
Monochrome Green
Generate more color steps for this palette here.
Monochrome Red
Generate more color steps for this palette here.
Diverging Scales
Similar to sequential color scales, diverging scales can be used to encode numeric data by color. Diverging colors scales should be used on maps or other charts to encode numeric values with a clear midpoint (such a 0, median etc.) for example, GDP growth rate, or gender parity in primary school enrollment. Use the stops shown here to calculate continuous color scales or use them as discrete colors for value bins.
The diverging scales defined by the style guide are perceptually uniform. This means that the darkness and saturation of colors increase in perceptually equal steps towards the high and low extremes. All diverging color scales are further designed to be accessible for all types of color visions and feature a sufficient lightness range to make values easy to distinguish.
Default
This diverging scale works best when showing numbers with a connotation of good/bad for higher or lower values (e.g. GDP growth). Use the warmer shades for the numbers with the more negative connotation and the cooler shades to show positive values.
Generate more color steps for this palette here.
Neutral
This diverging scale was designed to work well in conditions when showing numbers without a clear connotation of good/bad for higher or lower values (e.g. growth in urban vs rural living).
Generate more color steps for this palette here.
Alternative
This diverging scale can be used as an alternative for the Default diverging scale if you want to emphasize the negative connotation of the numbers more strongly.
Generate more color steps for this palette here.
Functional Colors
Functional colors are used for graphical elements representing data that have a specific meaning within the chosen chart.
Selections
To highlight a country across multiple charts, use one of the two selection colors.
Reference data & benchmarks
To show a regional or global benchmark or a reference country to compare against another selected country, use the reference color.
Data not available
For representations such as maps that contain countries without data, use the color for noData.
Pillar Colors
These colors should be used with caution in visualizations. They are not tested for sufficient background contrast and should not be used together in the same chart (e.g. to distinguish categories).
Pillar Colors
These colors should be used with caution in visualizations. They are not tested for sufficient background contrast and should not be used together in the same chart (e.g. to distinguish categories).
Chart Element Colors
Chart element colors are gray tones used for text and other chart elements that do not represent data. Thy are used for auxiliary elements such as grid lines, country outlines in maps, tick marks in legends, and highlights in maps and scatterplots.
Label Colors
The two label colors can be used for emphasized (dark) and subtle (light) text in charts. Dark text should be used for instance in tooltips for data values or for axis labels. Light text can be used for secondary information such as axis or legend tick labels and units.
Grays
Please refer to the Chart Elements page to see which grey to use for which chart element specifically.