Colour

Colour provides meaning and expression, and adds to a recognisable appearance. On a functional level, it’s there to support you by providing sufficient colour contrast or as an extra indication of (interactive) states.

KLM Blue

KLM Blue is our main brand colour and very recognisable as KLM. It’s used for our logo and other branding assets such as illustrations. For digital use, it has its limitations as the colour doesn’t provide a good enough contrast to pass the WCAG AA standard. Therefore, we try to limit the use and fall back on our primary colour palette to provide sufficient contrast in digital interfaces.

#00a1de

KLM Blue

Only use for branding purposes, the KLM logo and visuals.

Primary

Our primary palette consists of various shades of blue, composed to work for digital products and provide sufficient contrast (based on the usage). Lighter shades are mostly used for background elements. When the colour provides good enough contrast, it’s mostly used for foreground purposes. This starts at the Primary 500 shade.

Dark Mode / Primary

#003145

100

Used for backgrounds

#005b82

300

Used for backgrounds

#5eb6e4

500

Foreground color and main CTA

#9de0fa

800

Used for subtitles and non-primary actions

#ebf4f8

900

Used for primary text

Accent

As the name states, this colour is only used for accents and extra indications. Just like the KLM Blue colour, it should be used with care since it doesn’t provide a good enough colour contrast to be accessible. Therefore, do not apply it to text or as a background colour behind text.

Dark Mode / Accent

#e37222

500

Use for accents and visuals

Grey

Our neutral colours consist of grey values and are meant for backgrounds, borders, and texts. Neutral colours are calm, easy to observe and give room for other colours to highlight the right elements. As you may notice from the hexadecimal values, our grey palette is not 100% grey. It contains a light touch of blue that, in terms of hue, matches the primary palette.

Dark Mode / Grey

#081623

100

Use only as background colour

#040707

200

Use only as background colour

#646979

300

Use only as background colour

#6a787d

500

Use only as background colour

#a5a6ad

700

Used for tertiary text and caption

#eaebec

900

Used for secondary text

Blue

Used across information states.

Dark Mode / Blue

#173f52

100

Generally used across informative states, as a background color. NOT similar to our Primary colors.

#7cbcf7

300

Generally used across informative states, as a border color. NOT similar to our Primary colors.

#0db3f1

500

Generally used across informative states, as a fill color for icons. NOT similar to our Primary colors.

#e0f7ff

900

Used for informative states, as a text color on a Blue 100 background. NOT similar to our Primary colors.

Green

Used across success states.

Dark Mode / Green

#204219

100

Generally used across success/ complete states, as a background color

#9fd994

300

Generally used across success/ complete states, as a border color

#70e059

500

Generally used across success/ complete states, as a fill color for icons

#e8fbe4

900

Used for success/ complete states, as a text color on a Green 100 background

Red

Used across blocking or error states.

Dark Mode / Red

#5a2330

100

Generally used across blocking or error states, as a background color

#ff809d

300

Generally used across blocking or error states, as a border color

#f2819c

500

Generally used across blocking or error states, as a fill color for icons

#ffe0e8

900

Used for blocking or error states, as text color on a Red 100 background

Yellow

Used across warning or incomplete states.

Dark Mode / Yellow

#4e2b0b

100

Generally used across warning, incomplete or pending states, as a background color. For other purposes: only use as a background color.

#ffd97a

300

Generally used across warning, incomplete or pending states, as a border color. For other purposes: only use as a border or background color.

#f5b800

500

Generally used across warning, incomplete or pending states, as a fill color for icons

#ffe7b7

700

⚠️ Used for text on status label

#fff9e0

900

Used for warning, incomplete or pending states, as a text color on a Yellow 100 background

Neutral

Our neutral palette only contain black and white. For our dark theme the 100 and 900 colours are inverted compared to the original theme. However, in some situations it should stay white no matter the theme. For those cases the Neutral 0 is available.

Dark Mode / Neutral

#ffffff

This colour remains white whether in light or dark mode

#15222e

100

White

#ffffff

900

Black

State colours

States communicate the status of a component, for example when pressing or clicking an interactive component. To visually indicate this state we use opacity styles as an overlay, on top of the default component colour.

Container/ component background colour

Opacity style as a state overlay

Component content

Opacity states come in different values and colours, which are applied to our components. The values are based on the type of state. The colours are based on the component colour or surface colour. These opacity states our part of our Base Colours library.

Dark Mode / Opacity / Primary

rgba(157,224,250,0.08)

Use for hover states on white surface

rgba(157,224,250,0.16)

Use for active states on white surface

Dark Mode / Opacity / Black

rgba(255,255,255,0.04)

Use for hover states on white surface

rgba(255,255,255,0.08)

Use for active states on white surface

rgba(255,255,255,0.16)

Use for hover states on colour surface

rgba(255,255,255,0.24)

Use for active states on colour surface

Dark Mode / Opacity / White

rgba(0,0,0,0.16)

Use for hover states on colour surface

rgba(0,0,0,0.24)

Use for active states on colour surface