Types of colour palettes
The colour palettes used in visualisations can be divided into qualitative palettes for categorical data, and quantitative palettes for numerical data.
Table of colour values
The colour values of the ready-made palettes found below can be copied from the attached Excel table(Link leads to external service).
Design principles of colour palettes
The use of other colour combinations is also allowed, as long as they follow the City’s brand(Link leads to external service) and take into account accessible colour contrast minimum requirements and other accessibility factors that are addressed in more detail below.
In qualitative palettes, the aim is to choose colours that stand out from each other well, but appear to be approximately equal in terms of visual weight, unless the purpose is to specifically emphasize certain objects with a stronger colour.
In quantitative palettes the aim is to build the palettes so that a given change in colour darkness equals approximately the same change in numerical value.
This guide contains a set of qualitative and quantitative palettes based on the city’s brand colours, which take accessibility questions into account. For accessibility reasons, colours are used usually with outlines/borders.
Colour accessibility
Differences in colour vision as well as congenital or age-related impaired vision, can make it difficult to distinguish colours from each other. Presentation devices – especially projectors – and other factors related to the viewing context, such as strong reflections, can also distort perceived colours.
Since colour usually plays a big role in visualisations, it is particularly important that the key accessibility factors of colour perception are taken into account when choosing the colours used in your presentation.
Contrast
The digital services act(Link leads to external service) requires that content permanently published online fulfills at least the AA level of the WCAG 2.1 accessibility guideline. As far as colour use goes, the AA level requires that adjacent colour surfaces reach at least the following contrast ratios:
- Contrast of the text to its background colour should be at least 4.5:1
- Large text (size 18 points for normal weight text, 14 points for bold text) and its background colour contrast at least 3:1
- Other content elements that impart information should have a contrast of at least 3:1 to its background or adjacent elements
- There is no minimum contrast requirement for so-called non-vital content, such as purely decorative elements
You can check the darkness contrast between two colours with a contrast calculator(Link leads to external service). They are usually web-based applications that take two colour values (usually in hexadecimal format, e.g. #0072C6), after which the application calculates the contrast ratio between them. The algorithm used should return the same contrast value regardless of which colour is designated as the background colour, and which is the foreground/content colour. (It should be noted that the algorithm used to calculate the contrast ratio gives unrealistically good values when one of the colours is black. So, for example, black text on a dark background can get a good contrast value, even though the text is actually difficult to read.)
The contrast between a colour and its neighboring colours can be improved with the use of a border or outline, as the following examples show. It is generally advisable to use a darker shade of the fill colour (or black) as the outline colour.
Differences in colour vision (“colour blindness”)
Hereditary differences in colour vision – colloquially called “colour blindness” – affect approx. 8 percent of men and 0.5 percent of women. The most common are varying degrees of difficulty in distinguishing red and green shades from each other. Colour vision deteriorates with age even in those who do not have hereditary colour vision differences.
The WCAG 2.1 accessibility guideline required by the Digital services act only deals with colour vision indirectly, but this aspect should still be taken into account when designing accessible colour palettes.
Below are the City of Helsinki’s brand colours(Link leads to external service) and a simulation of what they look like for a person with the most common, deuteranopia-type colour blindness. You’ll notice some of the colours are almost indistinguishable from each other.
The qualitative and quantitative colour palettes defined in this guide have been designed taking into account the most common colour vision anomalies. In addition to using these palettes, it is recommended to simulate different colour vision types to evaluate the functionality of colour in your visualisation.
- In Adobe programs (e.g. Photoshop and InDesign) it is possible select colour blindness simulation from the View > Proof setup menu (deuteranopia or protanopia-type).
- In Windows, it is possible to turn on colour blindness simulation in the settings under Accessibility settings > colour filters simulations (deuteranopia, protanopia and tritanopia*)
- There are also browser-based tools for this purpose such as Adobe color accessibility tools(Link leads to external service) and Coblis simulator(Link leads to external service)
*) Tritanopia-type colour blindness is very rare – its prevalence in the population is only about 0.008% – so the functionality of the colour palette with tritanopia is not a necessary condition for its use in visualisations.
Patterns and textures
Striped patterns or other textures are sometimes used for colour surfaces to improve series distinction. Although patterns can help readers with differences in colour vision differentiate colour areas more reliably, patterns should still be used sparingly, as they may reduce the accessibility of the graphics for other user groups.
In particular very strong or dense patterns should be avoided. These cause an extra visual load for the reader, and may at worst trigger a migraine or epileptic attack in users with these ailments. The same applies to the use of patterns in a moving image.
Patterns or textures are mostly not needed if you use ready-made colour palettes, as the palette colours have been optimized with different uses in mind.
Qualitative colour palettes
In a qualitative colour palette, colours are used to show different categories – for example, gender, age group, constituency or industry. The aim is to use colours in such a way that the different categories are clearly distinguished from each other, but are visually approximately equal in weight – unless the purpose is to explicitly emphasize a certain category.
Below are six qualitative colour palettes built using the City of Helsinki’s brand colours(Link leads to external service) which are suitable for visualisation and take colour vision anomalies into account.
Other palettes can also be compiled from the brand colours, as long as you take into account that certain colour combinations cannot be used together owing to their similarity for people with colour vision anomalies. Consequently, some brand colours should only be used in visualisations as alternatives to each other.
You can see from the adjacent picture that the city’s brand colours can be used to build a qualitative palette of at most six colours, when taking into account accessibility requirements. This limitation does not significantly hinder the qualitative colour palettes, as the use of many more series colours is not generally recommended in any case.
If there are more than six series in the chart, it is usually better to use a small multiples display instead of adding more series colours.
Borders or outlines
In order to have sufficient colour contrast between adjacent chart elements and the background colour, it is most often recommended to use coloured outlines on the chart elements.
In general, it is preferable to use a darker shade of the fill colour as the border colour. It is also possible to use the same border colour for all fill colours, but in this case the chosen border colour must reach a 3:1 contrast ratio with all fill colours. This often requires the use of a very strong border colour (e.g. black), as is built into the Office-templates.
If it is technically feasible, it is best to render the border lines from lightest to darkest, so that when the edges overlap, the darker lines cover the lighter ones below.
You can copy the colour values from the linked Excel table.
Universal solution – dark borders
These border lines achieve a 3:1 contrast between the fill and border colour, so they can be used in all cases – even when several elements of the same colour appear next to each other in the chart (e.g. a choropleth map).
The colour named Bus cannot be used in these cases at all, as it is so dark that no other colour meets the 3:1 minimum contrast ratio requirement.
When the colour use order is known – lighter border lines
When the colour use order (see below) is known, or the colours appear separately from each other against a white background, a slightly lighter outline may be used.
The 3:1 contrast ratio needs to only be met between adjacent colours and the chart background (usually white). The border colours above are dark enough for all the qualitative palettes outlined below.
Note! In pie and donut charts it is usually necessary to use the darker borders, even though the use order of the colours in the chart is technically fixed. This is because the first and last slice colours end up appearing next to each other, as in this example:
Light or white borders
If the background colour of the visualisation is black or another very dark colour instead of white, it may be justified to use white or a lighter version of the same colour as the border.
Colours without borders
The following colours may be used without an outline in contexts where the background colour is white and the chart is either monochromatic, or the coloured elements are separate from each other (e.g. in pictograms):
Bus, Coat of Arms, Brick, Tram, Metro
Use of colours in line charts
Most visualisations are based on fairly large filled colour surfaces, where the use of an outline around the fill colour is a viable solution to improve colour distinction. In line charts however, that a outline cannot easily be added around the lines of the chart. In these cases, the lightest line colours must be changed so that they stand out sufficiently from the background colour.
Below are the recommended colours to use in lines charts when the background colour is white. Marked line charts symbol markers use the same fill colouring as in other chart types. The colour values can be copied from the Excel table linked at the beginning of this section.
It is not recommended to use the Tram and Copper colours at the same time in a line charts.
Below are the recommended colours to use in line charts when the background colour is white. The colour codes written in black are the same ones that are also used as a fill colour, the ones written in red are shades darkened for accessibility purposes.
Colour use order
If possible, a high-quality colour palette should be built in such a way that the colours have a fixed order of use, where darker and lighter colours alternate. This increases the distinctiveness of adjacent colours in charts such as the stacked column charts and area charts. In this case, the first palette colour is used for the first series of the chart, the second colour for the second, and so on. The qualitative palettes below are built on this principle.
In line charts it is worth modifying the order so that the darkest colours (Bus, Coat of arms, Brick, Metro, Tram) are used first.
The order of use can be altered when it is appropriate in the name of consistency. Categories with established colours (e.g. blue as the colour of water or, for example, the brand colours of HSL’s various means of transport) should be paired with these colours regardless of any recommended use order. The same colours should be used consistently in the same context (e.g. a publication or report), even if it leads to deviating from the recommended use order.
Ready qualitative colour palettes
The colour values of all palettes can be copied from the the Excel table linked at the top of this section.
1. Brand colours
- Coat of Arms
- Summer
- Tram
- Fog
- Gold
2. Cool
- Coat of Arms
- Fog
- Tram
- Gold 60%
- Engel
3. Cold
- Bus
- Fog
- Tram
- Engel
- Tram 40 %
4. Warm
- Metro
- Summer
- Coat of Arms
- Metro 50 %
- Fog
5. Colorful
- Coat of Arms
- Engel
- Bus 30 %
- Metro
- Copper
6. Pastels 1
- Fog
- Engel
- Gold 60%
- Silver
7. Pastels 2
- Bus 30 %
- Engel
- Metro 50 %
- Silver
8. Traffic lights
In contrast to the other palettes above, this one has only three colours. The palette is intended to depict either a dichotomous variable such as yes/no or good/bad (in which case only the two extremes are used) or a three-level variable such as good/average/poor or ready/in progress/late.
There is also a quantitative version of this palette.
- Brick
- Summer
- Copper
Quantitative colour palettes
In the sequential single- or multi-hue palette, there is a light and a dark colour at each end of the colour scale. The colours can be different degrees of lightness of the same tone (single-hue), but a better distinction between the colours is achieved when not only the darkness of the colour but also the hue varies, e.g. so that there is a dark blue at one end of the scale and a light yellow at the other (multi-hue).
In the diverging colour palette, the middle tone is white or light gray, and the ends of the palette have different shades of darker colours, e.g. orange and blue.
The colours of the diverging palette usually stand out a little better than in the sequential palette. However, it is worth noting that the middle tone is meaningful in terms of content and it should be placed in a logical place on the number scale. If there are positive and negative values in the material, the middle tone is usually placed at zero. Otherwise, the center can denote the mean or median of the data, for example.
Marking missing data
When information is missing, it is marked in sequential palettes with a gray tone #DEDFE1, or a striped pattern fill.
Missing information in diverging palettes is always denoted with a striped pattern, because these palettes often use a gray colour as the middle class, which may otherwise be misinterpreted as a sign of missing information.
The colour values of all palettes can be copied from the linked Excel table at the top of this section.
Ready quantitative colour palettes
Sequential palette 1. Blues
Sequential palette 2. Reds
Diverging palette 1. Metro-Coat of Arms
Diverging palette 2. Tram-Coat of Arms
Diverging palette 3. Tram-Gold
Diverging palette 4. traffic lights (quantitative)
This palette is intended to showcase a variable that can be undeniably placed on a good-bad axis.
There is also a qualitative version of this palette.
