KI's colour palette
As from 20 October 2022, Karolinska Institutet's colour palette will be altered and expanded. It is based on the plum colour which is one of KI's main identity bearers. The colour palette is designed to create dynamism and a modern expression and contributes to KI having a consistent visual expression. The colours meet the accessibility requirements in terms of contrast and readability.
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 color 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 colors. Orange is used as an accent color, for instance to highlight specific content. Black is mainly used as text color.
Primary colours codes
PMS 229c / 2357u
PMS 170c / 2024u
PMS 9280c / 9061u
PMS 50% 9481c / 9424u
KI’s graphic rules apply even if an organisational unit within KI is the main party, for example when creating a poster for a lecture you are organising or hosting.
The functional colours can be used for charts, infographics or illustrations.
KI's functional colours consist of 6 colour clusters:
Each cluster in turn contains three shades of varying color 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:
- Dark plum
- Light orange (NB! Special code for infographics)
- Light blue (NB! Special code for infographics)
- Light grey (NB! Special code for infographics)
- Light green
- 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
PMS 229c / 2357u
PMS 201c / 187u
PMS 170c / 2024u
Light orange (infographics)
PMS 2217c / 3165u
Light blue (infographics)
PMS 70% Black c/u
PMS 10% Black c/u
PMS 343c / 342u
PMS 346c / 345u
PMS 2012c / 130u
PMS 1345c / 2005u
PMS 9160c / 9224u
Colours and accessibility
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 color 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 color 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