🎨 Colours¢

Our goal is to provide a colour palette that allows a lot of freedom, is easy to use for all employees, but at the same time looks harmonious and meets some accessibility requirements.

This colour palette is the base for all of our products, company documentation, presentations, and similar. Find the range of colours and examples of use here:

CharacteristicsΒΆ

  • Modular
    The palette contains different colour families. The family itself consists of different variants and shades of a colour.
  • Interchangeable
    We can replace one colour family with another since different colours with the same gradation value share the same grey value.
  • Accessible by default
    • (WCAG) 2 Level AA is met for all colours with white or black text colour

    • Level AA is also met for colours that are at least 4 Steps apart

Accessibility valuesΒΆ

We ensure that we achieve at least level AA, with AAA being desirable. That means:

  • For level AA the required contrast between foreground and background for text is at least 4.5, for headlines and large text at least 3.

  • For level AAA for text is at least 7, for headlines and large text at least 4.5.

  • Interface elements require a contrast value of at least 3.

black

color-10

color-20

color-30

color-40

color-50

color-60

color-70

color-80

color-90

color-100

white

Contrast-Ratio White

β€”

β€”

β€”

β€”

7

4.5

3

β€”

β€”

β€”

β€”

β€”

Text normal

AAA

AAA

AAA

AAA

AAA

AA

β€”

β€”

β€”

β€”

β€”

β€”

Text large / Headlines

AAA

AAA

AAA

AAA

AAA

AAA

AA

β€”

β€”

β€”

β€”

β€”

Contrast-Ratio Black

β€”

β€”

β€”

β€”

3

4.5

4.5

7

β€”

β€”

β€”

β€”

Text normal

β€”

β€”

β€”

β€”

β€”

AA

AA

AAA

AAA

AAA

AAA

AAA

Text large / Headlines

β€”

β€”

β€”

β€”

AA

AAA

AAA

AAA

AAA

AAA

AAA

AAA

Colour paletteΒΆ

Hint

Click on a colour swatch to copy the hex value, or hold down the Alt key during the click to copy the CSS variable name.

Colour specificationsΒΆ

Black
#000000
Grey 10
#121212
Grey 20
#262626
Grey 30
#3D3D3D
Grey 40
#575757
Grey 50
#6E6E6E
Grey 60
#8F8F8F
Grey 70
#BDBDBD
Grey 80
#D6D6D6
Grey 90
#EDEDED
Grey 100
#F7F7F7
White
#FFFFFF
Black
#000000
Cold-Grey 10
#111215
Cold-Grey 20
#252629
Cold-Grey 30
#393E43
Cold-Grey 40
#52575F
Cold-Grey 50
#686E78
Cold-Grey 60
#898F99
Cold-Grey 70
#B7BDC8
Cold-Grey 80
#D0D6DF
Cold-Grey 90
#EBEDF3
Cold-Grey 100
#F6F7F9
White
#FFFFFF
Black
#000000
Warm-Grey 10
#141212
Warm-Grey 20
#282626
Warm-Grey 30
#3F3D3C
Warm-Grey 40
#5B5655
Warm-Grey 50
#726C6C
Warm-Grey 60
#938D8D
Warm-Grey 70
#C1BBBB
Warm-Grey 80
#DAD4D4
Warm-Grey 90
#EFECED
Warm-Grey 100
#F7F7F7
White
#FFFFFF
Black
#000000
Red 10
#290600
Red 20
#46160D
Red 30
#76190E
Red 40
#A32417
Red 50
#C73623
Red 60
#F05C41
Red 70
#FF8C6B
Red 80
#FFB193
Red 90
#FFD8C2
Red 100
#FFEFE6
White
#FFFFFF
Black
#000000
Orange 10
#230B00
Orange 20
#3E1E00
Orange 30
#662B00
Orange 40
#8E3E00
Orange 50
#AF5200
Orange 60
#D77300
Orange 70
#FF9D25
Orange 80
#FFBD63
Orange 90
#FFDEA6
Orange 100
#FFF1DA
White
#FFFFFF
Black
#000000
Yellow 10
#1A1100
Yellow 20
#322400
Yellow 30
#503900
Yellow 40
#6F5200
Yellow 50
#8C6700
Yellow 60
#B18800
Yellow 70
#E5B500
Yellow 80
#FBD04F
Yellow 90
#FFE99B
Yellow 100
#FFF5D6
White
#FFFFFF
Black
#000000
Olive 10
#111400
Olive 20
#282800
Olive 30
#3E4000
Olive 40
#565B00
Olive 50
#6E7200
Olive 60
#939300
Olive 70
#C5C100
Olive 80
#E1D93B
Olive 90
#F8EF94
Olive 100
#FEF8D4
White
#FFFFFF
Black
#000000
Lime 10
#081600
Lime 20
#202A00
Lime 30
#2D4400
Lime 40
#406000
Lime 50
#557900
Lime 60
#799A00
Lime 70
#AAC900
Lime 80
#CBE03C
Lime 90
#EBF394
Lime 100
#F8F9D4
White
#FFFFFF
Black
#000000
Green 10
#001900
Green 20
#0C2D00
Green 30
#004900
Green 40
#006700
Green 50
#008100
Green 60
#35A31C
Green 70
#6AD44F
Green 80
#99E980
Green 90
#CAFAB7
Green 100
#EAFDE1
White
#FFFFFF
Black
#000000
Sea-Green 10
#00190C
Sea-Green 20
#002E20
Sea-Green 30
#004A33
Sea-Green 40
#006948
Sea-Green 50
#00835C
Sea-Green 60
#00A67C
Sea-Green 70
#00D898
Sea-Green 80
#6AEDB9
Sea-Green 90
#B3FDDA
Sea-Green 100
#E1FEEF
White
#FFFFFF
Black
#000000
Blue 10
#00161E
Blue 20
#032B37
Blue 30
#00465D
Blue 40
#006282
Blue 50
#007B9F
Blue 60
#009DC2
Blue 70
#53CCF3
Blue 80
#8DE3FF
Blue 90
#C4F5FF
Blue 100
#E8FAFF
White
#FFFFFF
Black
#000000
Azure 10
#081227
Azure 20
#182644
Azure 30
#193D76
Azure 40
#2257A5
Azure 50
#396EC7
Azure 60
#628EEC
Azure 70
#94BCFF
Azure 80
#BBD5FF
Azure 90
#DEECFF
Azure 100
#F1F7FF
White
#FFFFFF
Black
#000000
Violet 10
#140E2A
Violet 20
#282149
Violet 30
#3C347D
Violet 40
#554AAE
Violet 50
#6D5FD2
Violet 60
#917FF8
Violet 70
#C3ADFF
Violet 80
#DDC9FF
Violet 90
#F3E5FF
Violet 100
#FBF4FF
White
#FFFFFF
Black
#000000
Purple 10
#1C0B22
Purple 20
#341E3D
Purple 30
#552C6A
Purple 40
#773F93
Purple 50
#9353B4
Purple 60
#B774D8
Purple 70
#E9A2FF
Purple 80
#FBC1FF
Purple 90
#FFE0FF
Purple 100
#FFF2FF
White
#FFFFFF
Black
#000000
Fuchsia 10
#24071C
Fuchsia 20
#3F1834
Fuchsia 30
#6B1D55
Fuchsia 40
#942B78
Fuchsia 50
#B63D94
Fuchsia 60
#DB61B7
Fuchsia 70
#FF91E7
Fuchsia 80
#FFB5F9
Fuchsia 90
#FFDAFF
Fuchsia 100
#FFF0FF
White
#FFFFFF
Black
#000000
Rose 10
#28050B
Rose 20
#45151F
Rose 30
#751631
Rose 40
#A31F45
Rose 50
#C63258
Rose 60
#EE5978
Rose 70
#FF8AA5
Rose 80
#FFB0C2
Rose 90
#FFD7E1
Rose 100
#FFEFF2
White
#FFFFFF

Hint

Click on a colour swatch to copy the hex value, or hold down the Alt key during the click to copy the CSS variable name.

Notes & hintsΒΆ

LuminanceΒΆ

The colour spaces of green, cyan and yellow are brighter than their counterparts. These colour families define the base line for the mid grey value. Thus, they affect the luminance of all other colours.

Sources & toolsΒΆ