Colors – Visualbook

Colors

Large colour swatch

Colours used in the application environment (UI – User Interface) and on the web.

CTA

#FE1A3F

Black

#000000

White

#FFFFFF

Light Gray

#F5F5F5

CTA

rgb(254, 26, 63)

Black

rgb(0, 0, 0)

White

rgb(255, 255, 255)

Light Gray

rgb(245, 245, 245)

CTA

N/A

Black

N/A

White

N/A

Light Gray

N/A

CTA

N/A

Black

N/A

White

N/A

Light Gray

N/A

CTA

N/A

Black

N/A

White

178 U

Light Gray

N/A

CTA

N/A

Black

N/A

White

N/A

Light Gray

N/A

CTA

R 5578

Black

N/A

White

D 4532

Light Gray

N/A

Medium colour swatch

Colours used in the application environment (UI – User Interface) and on the web.

Platinum

#E5E5E5

Silver

#C0C0C0

Nickel

#A5A5A5

Graphite

#7A7A7A

Tungsten

#595959

Charcoal

#3A3A3A

Platinum

rgb(229, 229, 229)

Silver

rgb(192, 192, 192)

Nickel

rgb(165, 165, 165)

Graphite

rgb(122, 122, 122)

Tungsten

rgb(89, 89, 89)

Charcoal

rgb(58, 58, 58)

Platinum

0-0-0-10

Silver

0-0-0-25

Nickel

0-0-0-35

Graphite

0-0-0-52

Tungsten

0-0-0-65

Charcoal

0-0-0-77

Platinum

Cool Gray 1 C

Silver

877 C (metallic)

Nickel

Cool Gray 5 C

Graphite

Cool Gray 8 C

Tungsten

Cool Gray 10 C

Charcoal

Black 7 C

Platinum

Cool Gray 1 U

Silver

877 U

Nickel

Cool Gray 5 U

Graphite

Cool Gray 8 U

Tungsten

Cool Gray 10 U

Charcoal

Black 7 U

Platinum

RAL 7035

Silver

RAL 9006

Nickel

RAL 7001

Graphite

RAL 7024

Tungsten

RAL 7043

Charcoal

RAL 7021

Platinum

N/A

Silver

N/A

Nickel

N/A

Graphite

N/A

Tungsten

N/A

Charcoal

N/A

Small colour swatch

Colours used in the application environment (UI – User Interface) and on the web.

Black

#000000

Dark Maroon

#2A0010

Burgundy

#540020

Cranberry

#7F0030

Raspberry

#A9003F

Rose Red

#D3004F

Bright Red

#FD005F

Error

#FE1B3F

Black

rgb(0, 0, 0)

Dark Maroon

rgb(42, 0, 16)

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 Maroon

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 Maroon

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 Maroon

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 Maroon

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 Maroon

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.

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.

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.

Text color

Background color

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

Explore this color combination on color.review or coolors.co

Color modes

Color modes (HEX, RGB, CMYK, Pantone, RAL, NCS) 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

Colors

On this page

Large colour swatch

Medium colour swatch

Small colour swatch

Compact colour palette

Wide range of colours

Gradient formula

Colour ratios

Contrast control

Text color

Background color

Resulting contrast

21.00

Small text

Large text

UI components

Color modes

Color Mode

What is it?

Usage