KI's colour palette

Primary colours

There are five primary colours in addition to black and white. The primary colours are dark plum, orange, light orange, light blue and plum.

Plum and dark plum, together with the logo, are the main elements in KI's brand and visual identity. Dark plum is used in text, as a background colour and in infographics. Plum is mainly used in the logo and in infographics/illustrations (not to be used a background colour in any upcoming produced material). Light orange and light blue are primarily used, along with white, as background colours. Orange is used as an accent colour, for instance to highlight specific content. Black is mainly used as text colour. 

Primary colours codes

Functional colours

The functional colours can be used for charts, infographics or illustrations.

KI's functional colours consist of 6 colour clusters:

1. plum
2. orange
3. blue
4. grey
5. green
6. yellow

Each cluster in turn contains three shades of varying colour intensity. (The numbers indicate the order of priority).

Colour management – charts

To ensure a uniform expression, as well as good contrasts, we use a fixed colour order, where dark and light tones alternate:

1. Dark plum
2. Orange
3. Plum
4. Light orange (NB! Special code for infographics)
5. Blue
6. Light blue (NB! Special code for infographics)
7. Grey
8. Light grey (NB! Special code for infographics)
9. Green
10. Light green
11. Yellow
12. Light yellow

For accessibility, texts or numbers should be in black and placed next to the bar/chart section.

In graphs and charts, the brightest colours need to have outlines (0,5 pt thin black outline) to enhance contrast between colours.

Colour management – infographics

Infographics also build KI's identity. Therefore, the colour clusters of the primary colours plum (1.) and orange (2.) should primarily be used. Avoid a messy expression, no more than two colour clusters should be used.

Texts placed on coloured backgrounds can be either black or white. Choose the colour that creates the greatest contrast against the background colour.

Functional colour codes

Colours and accessibility

Colour combinations

The letters within the circles show possible colour combinations that generally meet the accessibility requirements when it comes to readability and contrast.

WCAG guidelines* 2.1.

The size of the text also affects the colour impression and thus the readability, especially in digital media. Therefore, specific recommendations regarding text sizes can be found in the WCAG guidelines*. The examples are based on plain text on a large scale of at least 18 pt/24 px and smaller text of at least 14 pt/18.5 px.

The letters in the circles above correspond to the mentioned dimensions, for larger and smaller text, and indicate which colour combinations are allowed. All colour combinations, except for plum on orange, work on a large as well as a small scale.

NB! Larger typography is generally used in digital channels than in printed matter (for example 16 pt body text on the web would correspond to approximately 9 pt body text in a printed matter).

*Web Content Accessibility Guidelines