Large colour swatch
Colours used in the application environment (UI – User Interface) and on the web.
RGB
.ase
Figma - Design Tokens
.json
CSS Variables
.css
SCSS Variables
.scss
Tailwind Config
.js
PDF export
.pdf
All formats
.zip
Red
#FE1A3F
Black
#000000
White
#FFFFFF
Light Gray
#F5F5F5
Red
rgb(254, 26, 63)
Black
rgb(0, 0, 0)
White
rgb(255, 255, 255)
Light Gray
rgb(245, 245, 245)
Red
N/A
Black
N/A
White
N/A
Light Gray
N/A
Red
N/A
Black
N/A
White
N/A
Light Gray
N/A
Red
N/A
Black
N/A
White
178 U
Light Gray
N/A
Red
N/A
Black
N/A
White
N/A
Light Gray
N/A
Red
S 5578
Black
N/A
White
D 4532
Light Gray
N/A
Red
N/A
Black
N/A
White
N/A
Light Gray
N/A
Small colour swatch
Colours used in the application environment (UI – User Interface) and on the web.
RGB
.ase
CMYK
.ase
Figma - Design Tokens
.json
CSS Variables
.css
SCSS Variables
.scss
Tailwind Config
.js
PDF export
.pdf
All formats
.zip
Black
#000000
Dark Maroonssefe
#380016
Burgundy
#540020
Cranberry
#7F0030
Raspberry
#A9003F
Rose Red
#D3004F
Bright Red
#FD005F
Error
#FE1B3F
Black
rgb(0, 0, 0)
Dark Maroonssefe
rgb(56, 0, 22)
Burgundy
rgb(84, 0, 32)
Cranberry
rgb(127, 0, 48)
Raspberry
rgb(169, 0, 63)
Rose Red
rgb(211, 0, 79)
Bright Red
rgb(253, 0, 95)
Error
rgb(254, 27, 63)
Black
0-0-0-100
Dark Maroonssefe
0-100-60-84
Burgundy
0-100-60-70
Cranberry
0-100-60-55
Raspberry
0-100-60-35
Rose Red
0-100-60-17
Bright Red
0-100-63-1
Error
0-89-75-0
Black
Black C
Dark Maroonssefe
504 C
Burgundy
7645 C
Cranberry
7421 C
Raspberry
7635 C
Rose Red
1925 C
Bright Red
1787 C
Error
1788 C
Black
Black U
Dark Maroonssefe
504 U
Burgundy
7645 U
Cranberry
7421 U
Raspberry
7635 U
Rose Red
1925 U
Bright Red
1787 U
Error
1788 U
Black
RAL 9005
Dark Maroonssefe
RAL 3007
Burgundy
RAL 3005
Cranberry
RAL 4004
Raspberry
RAL 4006
Rose Red
RAL 4010
Bright Red
RAL 3026
Error
RAL 3027
Black
N/A
Dark Maroonssefe
N/A
Burgundy
N/A
Cranberry
N/A
Raspberry
N/A
Rose Red
N/A
Bright Red
N/A
Error
N/A
Black
N/A
Dark Maroonssefe
N/A
Burgundy
N/A
Cranberry
N/A
Raspberry
N/A
Rose Red
N/A
Bright Red
N/A
Error
N/A
Compact colour palette
Colour palettes allow us to create digital environments (apps, web) with sufficient contrast and accessibility of all elements.
RGB
.ase
CMYK
.ase
Figma - Design Tokens
.json
CSS Variables
.css
SCSS Variables
.scss
Tailwind Config
.js
PDF export
.pdf
All formats
.zip
Blue 100
#071338
Blue 90
#071D67
Blue 80
#0A2E9B
Blue 70
#1043CD
Blue 60
#2460FF
Blue 50
#4B8AFF
Blue 40
#7CA8FF
Blue 30
#A9C7FF
Blue 20
#D0E0FF
Blue 10
#ECF5FF
Gray 100
#161616
Gray 90
#262626
Gray 80
#393939
Gray 70
#525252
Gray 60
#6F6F6F
Gray 50
#8D8D8D
Gray 40
#A8A8A8
Gray 30
#C6C6C6
Gray 20
#E0E0E0
Gray 10
#F4F4F4
Red 100
#2B0B0B
Red 90
#4F090D
Red 80
#740E14
Red 70
#A2171F
Red 60
#D9222C
Red 50
#F95355
Red 40
#FF8384
Red 30
#FFB3B2
Red 20
#FFD6D5
Red 10
#FFF1F2
Blue 100
rgb(7, 19, 56)
Blue 90
rgb(7, 29, 103)
Blue 80
rgb(10, 46, 155)
Blue 70
rgb(16, 67, 205)
Blue 60
rgb(36, 96, 255)
Blue 50
rgb(75, 138, 255)
Blue 40
rgb(124, 168, 255)
Blue 30
rgb(169, 199, 255)
Blue 20
rgb(208, 224, 255)
Blue 10
rgb(236, 245, 255)
Gray 100
rgb(22, 22, 22)
Gray 90
rgb(38, 38, 38)
Gray 80
rgb(57, 57, 57)
Gray 70
rgb(82, 82, 82)
Gray 60
rgb(111, 111, 111)
Gray 50
rgb(141, 141, 141)
Gray 40
rgb(168, 168, 168)
Gray 30
rgb(198, 198, 198)
Gray 20
rgb(224, 224, 224)
Gray 10
rgb(244, 244, 244)
Red 100
rgb(43, 11, 11)
Red 90
rgb(79, 9, 13)
Red 80
rgb(116, 14, 20)
Red 70
rgb(162, 23, 31)
Red 60
rgb(217, 34, 44)
Red 50
rgb(249, 83, 85)
Red 40
rgb(255, 131, 132)
Red 30
rgb(255, 179, 178)
Red 20
rgb(255, 214, 213)
Red 10
rgb(255, 241, 242)
Blue 100
87-66-0-78
Blue 90
93-72-0-60
Blue 80
94-70-0-39
Blue 70
92-67-0-20
Blue 60
86-62-0-0
Blue 50
71-46-0-0
Blue 40
51-34-0-0
Blue 30
34-22-0-0
Blue 20
18-12-0-0
Blue 10
7-4-0-0
Gray 100
0-0-0-91
Gray 90
0-0-0-85
Gray 80
0-0-0-77
Gray 70
0-0-0-68
Gray 60
0-0-0-56
Gray 50
0-0-0-45
Gray 40
0-0-0-34
Gray 30
0-0-0-23
Gray 20
0-0-0-12
Gray 10
0-0-0-4
Red 100
0-74-74-83
Red 90
0-89-84-69
Red 80
0-88-83-55
Red 70
0-86-81-36
Red 60
0-84-80-15
Red 50
0-67-66-2
Red 40
0-49-48-0
Red 30
0-30-30-0
Red 20
0-16-16-0
Red 10
0-5-5-0
Blue 100
2965 C
Blue 90
2757 C
Blue 80
293 C
Blue 70
2728 C
Blue 60
2727 C
Blue 50
279 C
Blue 40
2718 C
Blue 30
2708 C
Blue 20
656 C
Blue 10
649 C
Gray 100
Black 6 C
Gray 90
Cool Gray 11 C
Gray 80
Cool Gray 10 C
Gray 70
Cool Gray 9 C
Gray 60
Cool Gray 8 C
Gray 50
Cool Gray 7 C
Gray 40
Cool Gray 6 C
Gray 30
Cool Gray 4 C
Gray 20
Cool Gray 2 C
Gray 10
Cool Gray 1 C
Red 100
4975 C
Red 90
490 C
Red 80
491 C
Red 70
492 C
Red 60
485 C
Red 50
7417 C
Red 40
709 C
Red 30
707 C
Red 20
705 C
Red 10
663 C
Blue 100
2965 U
Blue 90
2757 U
Blue 80
293 U
Blue 70
2728 U
Blue 60
2727 U
Blue 50
279 U
Blue 40
2718 U
Blue 30
2708 U
Blue 20
656 U
Blue 10
649 U
Gray 100
Black 6 U
Gray 90
Cool Gray 11 U
Gray 80
Cool Gray 10 U
Gray 70
Cool Gray 9 U
Gray 60
Cool Gray 8 U
Gray 50
Cool Gray 7 U
Gray 40
Cool Gray 6 U
Gray 30
Cool Gray 4 U
Gray 20
Cool Gray 2 U
Gray 10
Cool Gray 1 U
Red 100
4975 U
Red 90
490 U
Red 80
491 U
Red 70
492 U
Red 60
485 U
Red 50
7417 U
Red 40
709 U
Red 30
707 U
Red 20
705 U
Red 10
663 U
Blue 100
5004
Blue 90
5002
Blue 80
5010
Blue 70
5015
Blue 60
5012
Blue 50
5015
Blue 40
5024
Blue 30
5015
Blue 20
9003
Blue 10
9016
Gray 100
9011
Gray 90
7021
Gray 80
7022
Gray 70
7031
Gray 60
7042
Gray 50
7045
Gray 40
7035
Gray 30
7047
Gray 20
9018
Gray 10
9003
Red 100
3007
Red 90
3009
Red 80
3011
Red 70
3003
Red 60
3020
Red 50
3027
Red 40
3015
Red 30
3015
Red 20
3015
Red 10
9016
Blue 100
S7020-R80B
Blue 90
S6030-R80B
Blue 80
S4050-R80B
Blue 70
S3060-R80B
Blue 60
S2060-R80B
Blue 50
S1555-R80B
Blue 40
S1040-R80B
Blue 30
S0520-R80B
Blue 20
S0510-R80B
Blue 10
S0505-R80B
Gray 100
S9000-N
Gray 90
S8000-N
Gray 80
S7500-N
Gray 70
S6500-N
Gray 60
S5500-N
Gray 50
S4500-N
Gray 40
S3500-N
Gray 30
S2500-N
Gray 20
S1500-N
Gray 10
S0500-N
Red 100
S8005-Y80R
Red 90
S7020-Y90R
Red 80
S6030-Y90R
Red 70
S5040-Y90R
Red 60
S3060-Y90R
Red 50
S2070-Y90R
Red 40
S1040-Y90R
Red 30
S0530-Y90R
Red 20
S0510-Y90R
Red 10
S0505-Y90R
Wide range of colours
Colour palettes allow us to create digital environments (apps, web) with sufficient contrast and accessibility of all elements.
RGB
.ase
CMYK
.ase
Figma - Design Tokens
.json
CSS Variables
.css
SCSS Variables
.scss
Tailwind Config
.js
PDF export
.pdf
All formats
.zip
Blue 100
#071338
Blue 90
#071D67
Blue 80
#0A2E9B
Blue 70
#1043CD
Blue 60
#2460FF
Blue 50
#4B8AFF
Blue 40
#7CA8FF
Blue 30
#A9C7FF
Blue 20
#D0E0FF
Blue 10
#ECF5FF
Red 100
#2B0B0B
Red 90
#4F090D
Red 80
#740E14
Red 70
#A2171F
Red 60
#D9222C
Red 50
#F95355
Red 40
#FF8384
Red 30
#FFB3B2
Red 20
#FFD6D5
Red 10
#FFF1F2
Blue 100
rgb(7, 19, 56)
Blue 90
rgb(7, 29, 103)
Blue 80
rgb(10, 46, 155)
Blue 70
rgb(16, 67, 205)
Blue 60
rgb(36, 96, 255)
Blue 50
rgb(75, 138, 255)
Blue 40
rgb(124, 168, 255)
Blue 30
rgb(169, 199, 255)
Blue 20
rgb(208, 224, 255)
Blue 10
rgb(236, 245, 255)
Red 100
rgb(43, 11, 11)
Red 90
rgb(79, 9, 13)
Red 80
rgb(116, 14, 20)
Red 70
rgb(162, 23, 31)
Red 60
rgb(217, 34, 44)
Red 50
rgb(249, 83, 85)
Red 40
rgb(255, 131, 132)
Red 30
rgb(255, 179, 178)
Red 20
rgb(255, 214, 213)
Red 10
rgb(255, 241, 242)
Blue 100
87-66-0-78
Blue 90
93-72-0-60
Blue 80
94-70-0-39
Blue 70
92-67-0-20
Blue 60
86-62-0-0
Blue 50
71-46-0-0
Blue 40
51-34-0-0
Blue 30
34-22-0-0
Blue 20
18-12-0-0
Blue 10
7-4-0-0
Red 100
0-74-74-83
Red 90
0-89-84-69
Red 80
0-88-83-55
Red 70
0-86-81-36
Red 60
0-84-80-15
Red 50
0-67-66-2
Red 40
0-49-48-0
Red 30
0-30-30-0
Red 20
0-16-16-0
Red 10
0-5-5-0
Blue 100
2965 C
Blue 90
2757 C
Blue 80
293 C
Blue 70
2728 C
Blue 60
2727 C
Blue 50
279 C
Blue 40
2718 C
Blue 30
2708 C
Blue 20
656 C
Blue 10
649 C
Red 100
4975 C
Red 90
490 C
Red 80
491 C
Red 70
492 C
Red 60
485 C
Red 50
7417 C
Red 40
709 C
Red 30
707 C
Red 20
705 C
Red 10
663 C
Blue 100
2965 U
Blue 90
2757 U
Blue 80
293 U
Blue 70
2728 U
Blue 60
2727 U
Blue 50
279 U
Blue 40
2718 U
Blue 30
2708 U
Blue 20
656 U
Blue 10
649 U
Red 100
4975 U
Red 90
490 U
Red 80
491 U
Red 70
492 U
Red 60
485 U
Red 50
7417 U
Red 40
709 U
Red 30
707 U
Red 20
705 U
Red 10
663 U
Blue 100
5004
Blue 90
5002
Blue 80
5010
Blue 70
5015
Blue 60
5012
Blue 50
5015
Blue 40
5024
Blue 30
5015
Blue 20
9003
Blue 10
9016
Red 100
3007
Red 90
3009
Red 80
3011
Red 70
3003
Red 60
3020
Red 50
3027
Red 40
3015
Red 30
3015
Red 20
3015
Red 10
9016
Blue 100
S7020-R80B
Blue 90
S6030-R80B
Blue 80
S4050-R80B
Blue 70
S3060-R80B
Blue 60
S2060-R80B
Blue 50
S1555-R80B
Blue 40
S1040-R80B
Blue 30
S0520-R80B
Blue 20
S0510-R80B
Blue 10
S0505-R80B
Red 100
S8005-Y80R
Red 90
S7020-Y90R
Red 80
S6030-Y90R
Red 70
S5040-Y90R
Red 60
S3060-Y90R
Red 50
S2070-Y90R
Red 40
S1040-Y90R
Red 30
S0530-Y90R
Red 20
S0510-Y90R
Red 10
S0505-Y90R
Gradient formula
Examples of gradients used within a brand. Gradients with three colors can now be defined.
Visualbook Red
#FE1B3F
Info 20
#C7E3FF
CTA
#0F62FE
Info 20
#C7E3FF
Visualbook Red
#FE1B3F
CTA
#0F62FE
Black
#000000
Gray 100
#141619
Gray 70
#4F525F
CTA
#0F62FE
Colour ratios
Proportional use of colour within the visual style. The section is in a new, improved design.
Contrast control
Check the contrast between foreground and background colours to ensure that text, headings and buttons are legible according to accessibility standards.
Resulting contrast
21.00
Small text
Less than 18pt or 14pt bold
AAA
Large text
At least 18pt or 14pt bold
AAA
UI components
Graphical objects and UI components
AA
Explore this color combination on color.review or coolors.co
Color modes
Color modes (HEX, RGB, CMYK, Pantone, RAL, NCS, 3M) represent different color definition systems used in various media and technologies. The table below explains their usage for proper logo display on screens, in print, or physical materials.
| Color Mode | What is it? | Usage |
|---|---|---|
| HEX | RGB Equivalent (hexadecimal) | WEBHTMLCSS |
| RGB | Color Space of Screens RGB | WEBHTMLCSS |
| CMYK |
Color Space for Printers CMYK |
PRINT |
| Pantone |
Direct Mixed Colors Pantone for printing | PRINT |
| RAL |
Color matching system RAL for physical objects | INDUSTRIAL |
| NCS |
Natural Color System NCS based on human perception | INDUSTRIALDESIGN |
| 3M |
Vinyl wrap system 3M for wraps and signage | SIGNAGE |