Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
BreakpointsColourPrinciplesAccessibilityUsageHDS ColoursAccessible colour combinationsTokensSpacingTypography
Components
Patterns
About
Contributing
Resources

Colour

Colour tokens store the colour variables for styling elements.

Colour can be used for branding, providing visual hierarchy and giving visual cues for action.

The Helsinki Design system colour tokens are based on the City of Helsinki brand colour palette. More information on using and combining the brand colours in the City of Helsinki Visual Identity Guidelines - Colours.

Also see visual "Do and Don't" example images in the Colour usage examples - Abstract collection. These images will help you understand where brand colours and their variants can be used.

Principles

  • Use bold colours to attract users attention to most important content and primary actions.
  • Use lighter hues and shades to fade less important information to background, but be sure to maintain an accessible colour contrast.
  • Colour can also be used to differentiate sections or content types.

Accessibility

  • When choosing and using colours, always check that sufficient colour contrast between the element and its background is maintained. All colour choices should comply with WCAG 2.1 Standard at AA Level contrast ratios.
  • Do not rely solely on colour when communicating information to user – especially crucial system information like error state, success state, or warnings. Also convey the same information with another modality, e.g. with a text label or icon that clearly indicates its meaning.

Usage

The design system uses a colour theme that includes:

  • Primary colour: the colour displayed most frequently across your service and its components. If you are not using a secondary colour, your primary colour can also be used to accent elements.
  • Secondary and Tertiary colours: these provide more ways for accenting select UI elements and distinguishing your service. The secondary and tertiary colours should be applied sparingly and with intent.
  • UI colours: the common colours for feedback (error, warning, success, info).
  • Grayscale: neutral colour shades.

The colour palette also provides lighter and darker variants for the base colours.

  • Do not use light and dark variants as the main colour of a page.
  • Light and dark variants should only be used in addition to base colours for theming UI component states and differentiating information types.

Customising colours

Colours are defined as CSS variables and the theme is therefore customisable.

When customising colours always check that:

  1. the colour combination follows the City of Helsinki Visual Identity Guidelines - Safe color combinations
  2. the colour contrast is compliant with WCAG 2.1 Standard at AA Level contrast ratios. Note that font size affects the contrast criteria of text elements. You can find tools for checking contrast accessibility in the Resources page

HDS Colours

Brand colours

Brand colours are used for primary, secondary and tertiary colours. They should not be used for indicating system status.

Before using Dark and Light brand colour variants, please see example images in the Colour usage examples - Abstract collection.

Colour name (en)Colour name (fi)Base colourDarkMedium lightLight
Coat of ArmsVaakuna
GoldKulta
SilverHopea
BrickTiili
BusBussi
CopperKupari
EngelEngel
FogSumu
MetroMetro
SummerKesä
SuomenlinnaSuomenlinna
TramSpåra

UI colours

Status colours are reserved exclusively for indicating valid, invalid or informational states on the service.

StatusUsageExampleBase colourDarkLight
errorError state which requires user's immediate actions.Form is missing critical information.
alertWarning state to catch user's attention but does not require immediate actions.Loading is taking longer than expected.
successPositive state to inform user about success.Form submit was successful!
infoState which does not indicate clear success or failure but can be useful extra information to the user.You have received new messages.

Grayscale

black 9080706050403020105white

Accessible colour combinations

Here you can find some recommended colour combinations for text and other informative elements. The examples are sorted in order of their contrast ratio. For more examples of accessibile colour combinations, see the Colour accessibility examples - Abstract collection.

  • AA (contrast ratio at least 4,5 : 1) and AAA (contrast ratio at least 7 : 1) means you can safely use the color combination on all text sizes
  • AA for large text (contrast ratio at least 3 : 1) means the text size should be at least 18 pt for regular weight or 14 pt for bold weight
  • Black 90 is the default text colour in HDS

Brand colour combinations

Brand ColourText ColourColour contrastExample
Engelblack 90AAA 14,3 : 1
AAA
Hopeablack 90AAA 13,1 : 1
AAA
BussiwhiteAAA 12 : 1
AAA
Kesäblack 90AAA 11,1 : 1
AAA
Sumublack 90AAA 10 : 1
AAA
Kupariblack 90AAA 9,4 : 1
AAA
Suomenlinnablack 90AAA 9,1 : 1
AAA
Kultablack 90AAA 7,1 : 1
AAA
TiiliwhiteAA (AAA for large text) 6,1 : 1
AA
Metroblack 90AA (AAA for large text) 5,2 : 1
AA
VaakunawhiteAA (AAA for large text) 5 : 1
AA
Spårawhite

AA for large text 4 : 1

For text and other informative elements on white background it is recommended to only use following brand colours:

Brand ColourColour contrastExample
BussiAAA 12 : 1

AAA

TiiliAA (AAA for large text) 6,1 : 1

AA

VaakunaAA (AAA for large text) 5 : 1

AA

Spåra

AA for large text 4 : 1

Metro

AA for large text 3,3 : 1

Grayscale combinations

Brand ColourText ColourColour contrastAs backgroundAs text on white
BlackwhiteAAA 21 : 1
AAA

AAA

Black 90whiteAAA 17,4 : 1
AAA

AAA

Black 80whiteAAA 12,6 : 1
AAA

AAA

Black 70whiteAAA 8,6 : 1
AAA

AAA

Black 60whiteAA (AAA for large text) 5,7 : 1
AA

AA

Black 50black 90

AA for large text 4,3 : 1/4 : 1

Black 40black 90AA (AAA for large text) 6,1 : 1
AA
Black 30black 90AAA 10,9 : 1
AAA
Black 20black 90AAA 13,8 : 1
AAA
Black 10black 90AAA 15,6 : 1
AAA

Focus colour

HDS components use a custom focus colour styling instead of the default browser provided style. The default HDS focus style is accessible on light backgrounds. Since HDS does not offer dark mode, the focus style colour may require customising when using HDS components on darker backgrounds. The WCAG requirement for user interface element contrast is 3 : 1.

Focus ColourBackground ColourFocus style contrastExample
Vaakuna (default)whiteAA 5 : 1
AA
Vaakuna (default)blackAA 4,2 : 1
AA

HDS focus style colour can be customised to better fit the theme of the service. However, the implementor must always ensure that the following WCAG requirements are met:

Tokens

The colour tokens are provided as CSS and SASS variables in hds-design-tokens repository in GitHub.

CSSSASSValueExample
--color-brick$color-brick#bd2719
Aa
--color-brick-light$color-brick-light#ffeeed
Aa
--color-brick-medium-light$color-brick-medium-light#facbc8
Aa
--color-brick-dark$color-brick-dark#800e04
Aa
--color-bus$color-bus#0000bf
Aa
--color-bus-light$color-bus-light#f0f0ff
Aa
--color-bus-medium-light$color-bus-medium-light#ccccff
Aa
--color-bus-dark$color-bus-dark#00005e
Aa
--color-coat-of-arms$color-coat-of-arms#0072c6
Aa
--color-coat-of-arms-light$color-coat-of-arms-light#e6f4ff
Aa
--color-coat-of-arms-medium-light$color-coat-of-arms-medium-light#b5daf7
Aa
--color-coat-of-arms-dark$color-coat-of-arms-dark#005799
Aa
--color-gold$color-gold#c2a251
Aa
--color-gold-light$color-gold-light#f7f2e4
Aa
--color-gold-medium-light$color-gold-medium-light#e8d7a7
Aa
--color-gold-dark$color-gold-dark#9e823c
Aa
--color-silver$color-silver#dedfe1
Aa
--color-silver-light$color-silver-light#f7f7f8
Aa
--color-silver-medium-light$color-silver-medium-light#efeff0
Aa
--color-silver-dark$color-silver-dark#b0b8bf
Aa
--color-copper$color-copper#00d7a7
Aa
--color-copper-light$color-copper-light#cffaf1
Aa
--color-copper-medium-light$color-copper-medium-light#9ef0de
Aa
--color-copper-dark$color-copper-dark#00a17d
Aa
--color-engel$color-engel#ffe977
Aa
--color-engel-light$color-engel-light#fff9db
Aa
--color-engel-medium-light$color-engel-medium-light#fff3b8
Aa
--color-engel-dark$color-engel-dark#dbc030
Aa
--color-fog$color-fog#9fc9eb
Aa
--color-fog-light$color-fog-light#e8f3fc
Aa
--color-fog-medium-light$color-fog-medium-light#d0e6f7
Aa
--color-fog-dark$color-fog-dark#72a5cf
Aa
--color-metro$color-metro#fd4f00
Aa
--color-metro-light$color-metro-light#ffeee6
Aa
--color-metro-medium-light$color-metro-medium-light#ffcab3
Aa
--color-metro-dark$color-metro-dark#bd2f00
Aa
--color-summer$color-summer#ffc61e
Aa
--color-summer-light$color-summer-light#fff4d4
Aa
--color-summer-medium-light$color-summer-medium-light#ffe49c
Aa
--color-summer-dark$color-summer-dark#cc9200
Aa
--color-suomenlinna$color-suomenlinna#f5a3c7
Aa
--color-suomenlinna-light$color-suomenlinna-light#fff0f7
Aa
--color-suomenlinna-medium-light$color-suomenlinna-medium-light#ffdbeb
Aa
--color-suomenlinna-dark$color-suomenlinna-dark#e673a5
Aa
--color-tram$color-tram#009246
Aa
--color-tram-light$color-tram-light#dff7eb
Aa
--color-tram-medium-light$color-tram-medium-light#a3e3c2
Aa
--color-tram-dark$color-tram-dark#006631
Aa
--color-error$color-error#c4123e
Aa
--color-error-light$color-error-light#f6e2e6
Aa
--color-error-dark$color-error-dark#8d0d2d
Aa
--color-success$color-success:#007a64
Aa
--color-success-light$color-success-light#e2f5f3
Aa
--color-success-dark$color-success-dark#006250
Aa
--color-alert$color-alert#ffda07
Aa
--color-alert-light$color-alert-light#fff4b4
Aa
--color-alert-dark$color-alert-dark#986700
Aa
--color-info$color-info#007293
Aa
--color-info-light$color-info-light#dcf1f5
Aa
--color-info-dark$color-info-dark#005b76
Aa
--color-white$color-white#ffffff
Aa
--color-black-5$color-black-5#f1f1f1
Aa
--color-black-10$color-black-10#e5e5e5
Aa
--color-black-20$color-black-20#cccccc
Aa
--color-black-30$color-black-30#b2b2b2
Aa
--color-black-40$color-black-40#999898
Aa
--color-black-50$color-black-50#808080
Aa
--color-black-60$color-black-60#666666
Aa
--color-black-70$color-black-70#4c4c4c
Aa
--color-black-80$color-black-80#333333
Aa
--color-black-90$color-black-90#1a1a1a
Aa
--color-black$color-black#000000
Aa