🎨 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

• Color in UI Design: A (Practical) Framework

• Designing Systematic Colors

• Because, colors are beautiful

• Web Content Accessibility Guidelines (WCAG) 2 Level AA Conformance

• Color.review