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.

Primary

#ebf3f8

100

Used for backgrounds

#c2dbea

300

Used for backgrounds

#0077cd

500

#0e578c

800

Used for subtitles and non-primary actions

#072b45

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.

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.

Grey

#f6f7f8

100

Use only as background colour

#eaebec

200

Use only as background colour

#d4d8da

300

Use only as background colour

#aab0b5

500

Use only as background colour

#6a757d

700

Used for tertiary text and caption

#3f4e58

900

Used for secondary text

Blue

Used across information states.

Blue

#e0f2ff

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.

#006fc9

500

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

#002845

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.

Green

#e8fbe4

100

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

#9fd994

300

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

#268712

500

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

#193403

900

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

Red

Used across blocking or error states.

Red

#ffe0e8

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

#d10031

500

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

#430211

900

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

Yellow

Used across warning or incomplete states.

Yellow

#fff9e0

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

#a66300

700

Used for text on status label

#322800

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. White is used as a background or text colour in general. Sometimes it translates to white for our dark theme as well. In that case it will always stay white, where we introduced a separate style/ class for (the '0' class). In other cases it will translate to the dark mode opposite.

Neutral

#ffffff

0 (always white)

This colour remains white whether in light or dark mode

#ffffff

100

White

#000000

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.

Opacity / Primary

rgba(14,87,140,0.08)

Use for hover states on white surface

rgba(14,87,140,0.16)

Use for active states on white surface

Opacity / Black

rgba(0,0,0,0.04)

Use for hover states on white surface

rgba(0,0,0,0.08)

Use for active states on white surface or for hover states on a colour surface

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

Opacity / White

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

Accessibility

The way we apply colour plays a mayor role when it comes to providing accessible experiences. Users, including users with visual disabilities, must be able to perceive content on the page. In order to do so, the colour contrast should be sufficient enough.

When we say contrast, we mean the difference between two colours. For accessibility measures, this difference is measured and represented as a ratio. This ratio should at least pass the minimum AA requirement as provides by the Web Content Accessibility Guidelines (WCAG). The visual presentation of text should have a contrast ratio of at least 4.5:1, with exceptions for large text (should have at least a 3:1 ratio), graphics, decorative elements or logotypes.

This means that the colours on this page, could not simply be combined with any other colour. Only combinations that pass the minimum AA requirements can be applied. In the matrix below, you can see which colour combination provide sufficient contrast (marked green with a checkmark). Some combinations are only allowed when using large text, meaning at least 19px and bold or 24px regular (marked yellow with a letter 'L'). We did not include our notification colours.