Web colour palette

The Fortum Web Colour Palette is used for Fortum websites, digital applications, and services. It is built around the Fortum brand colours and includes more colours to ensure a wider range of accessible colour combinations. Some of the Fortum brand colours have been tweaked in the Web Colour palette for accessibility, and they have their own names and differing colour codes. 

 

FORTUM BRAND COLOURS

FORTUM WEB COLOUR PALETTE
Powering green Powering green #18d270
Consistent green Ocean green #0f7a5a
Calming green Emerald green #1e4f45
Broad blue Broad blue #23375b
Charged orange Fall red-orange #ff9673
Kinetic yellow Aureolin yellow #f5e150
Dusk pink Lavender purple #eeb6f2
Balancing beige Balancing beige #f3ead9

 

The user interface components use a small set of colors as their primary palette. The colors used by the components each map to a meaning, demonstrated by the following table.

Primary Ocean green
Secondary Powering green
Background Snow white
Text Ink grey
Info Cushy blue
Alert Haze red-orange
Warning Aureolin yellow

 

All the colours in the user interface components follow WCAG AA-level in colour contrast ratio. Use at least 4.5:1 for normal text, 3:1 for large text, and a contrast ratio of at least 3:1 for graphics, when combining colours from the Fortum Web Colour Palette. The Fortum Design System website has a colour contrast checker, which can be used to see how different colour combinations comply with the WCAG AA-level.

To get access to the whole Fortum Web Colour Palette visit the Colours page on the Fortum Design System website. In addition to the preferred colours, the page shows more supporting colours and the Neutrals palette, which includes the grey shades.

To get credentials to the Fortum Design System please contact:

Annika Andersson
Visual/UI Designer
annika.andersson (at) fortum.com