Colors

Color System

For light mode interfaces, we use a color system of 12 tones on our grey scale (from neutral 0 to neutral 1000) and 5 tones on all our accent colors. All these tones have a logical gap between each other, to ensure good contrast and perfect accessibility.

As for dark mode interfaces, the same color keys are used. The only difference comes from color scales that are almost reversed and with many grey tokens to provide a good reading experience.

Primary colors

A
Fail
A
Fail
A
Pass
A
Pass
Name
Primary 700
Key
primary700
RGB
39, 31, 224
Hexa
#271fe0
A
Fail
A
Fail
A
Pass
A
Fail
Name
Primary 600
Key
primary600
RGB
73, 69, 255
Hexa
#4945ff
A
Pass
A
Fail
A
Fail
A
Fail
Name
Primary 500
Key
primary500
RGB
123, 121, 255
Hexa
#7b79ff
A
Pass
A
Pass
A
Fail
A
Fail
Name
Primary 200
Key
primary200
RGB
217, 216, 255
Hexa
#d9d8ff
A
Pass
A
Pass
A
Fail
A
Fail
Name
Primary 100
Key
primary100
RGB
240, 240, 255
Hexa
#f0f0ff

Success colors

A
Fail
A
Fail
A
Pass
A
Fail
Name
Success 700
Key
success700
RGB
47, 104, 70
Hexa
#2f6846
A
Fail
A
Fail
A
Pass
A
Fail
Name
Success 600
Key
success600
RGB
50, 128, 72
Hexa
#328048
A
Pass
A
Pass
A
Fail
A
Fail
Name
Success 500
Key
success500
RGB
92, 177, 118
Hexa
#5cb176
A
Pass
A
Pass
A
Fail
A
Fail
Name
Success 200
Key
success200
RGB
198, 240, 194
Hexa
#c6f0c2
A
Pass
A
Pass
A
Fail
A
Fail
Name
Success 100
Key
success100
RGB
234, 251, 231
Hexa
#eafbe7

Danger colors

A
Fail
A
Fail
A
Pass
A
Fail
Name
Danger 700
Key
danger700
RGB
183, 43, 26
Hexa
#b72b1a
A
Fail
A
Fail
A
Pass
A
Fail
Name
Danger 600
Key
danger600
RGB
208, 43, 32
Hexa
#d02b20
A
Pass
A
Fail
A
Fail
A
Fail
Name
Danger 500
Key
danger500
RGB
238, 94, 82
Hexa
#ee5e52
A
Pass
A
Pass
A
Fail
A
Fail
Name
Danger 200
Key
danger200
RGB
245, 192, 184
Hexa
#f5c0b8
A
Pass
A
Pass
A
Fail
A
Fail
Name
Danger 100
Key
danger100
RGB
252, 236, 234
Hexa
#fcecea

Warning colors

A
Pass
A
Fail
A
Fail
A
Fail
Name
Warning 700
Key
warning700
RGB
190, 93, 1
Hexa
#be5d01
A
Pass
A
Pass
A
Fail
A
Fail
Name
Warning 600
Key
warning600
RGB
217, 130, 47
Hexa
#d9822f
A
Pass
A
Pass
A
Fail
A
Fail
Name
Warning 500
Key
warning500
RGB
242, 157, 65
Hexa
#f29d41
A
Pass
A
Pass
A
Fail
A
Fail
Name
Warning 200
Key
warning200
RGB
250, 231, 185
Hexa
#fae7b9
A
Pass
A
Pass
A
Fail
A
Fail
Name
Warning 100
Key
warning100
RGB
253, 244, 220
Hexa
#fdf4dc

Secondary colors

A
Fail
A
Fail
A
Pass
A
Fail
Name
Secondary 700
Key
secondary700
RGB
0, 96, 150
Hexa
#006096
A
Fail
A
Fail
A
Pass
A
Fail
Name
Secondary 600
Key
secondary600
RGB
12, 117, 175
Hexa
#0c75af
A
Pass
A
Pass
A
Fail
A
Fail
Name
Secondary 500
Key
secondary500
RGB
102, 183, 241
Hexa
#66b7f1
A
Pass
A
Pass
A
Fail
A
Fail
Name
Secondary 200
Key
secondary200
RGB
184, 225, 255
Hexa
#b8e1ff
A
Pass
A
Pass
A
Fail
A
Fail
Name
Secondary 100
Key
secondary100
RGB
234, 245, 255
Hexa
#eaf5ff

Alternative colors

A
Fail
A
Fail
A
Pass
A
Pass
Name
Alternative 700
Key
alternative700
RGB
131, 18, 209
Hexa
#8312d1
A
Fail
A
Fail
A
Pass
A
Fail
Name
Alternative 600
Key
alternative600
RGB
151, 54, 232
Hexa
#9736e8
A
Pass
A
Fail
A
Fail
A
Fail
Name
Alternative 500
Key
alternative500
RGB
172, 115, 230
Hexa
#ac73e6
A
Pass
A
Pass
A
Fail
A
Fail
Name
Alternative 200
Key
alternative200
RGB
224, 193, 244
Hexa
#e0c1f4
A
Pass
A
Pass
A
Fail
A
Fail
Name
Alternative 100
Key
alternative100
RGB
246, 236, 252
Hexa
#f6ecfc

PreviousRadius & shadows

NextIconography