/
v2.0.0
Github
Storybook

Colors tests

Shades test#

Click on color box to copy hex value to clipboard.
Turn on grayscale display to focus on the lightness of shades without being distracted by their saturation.
Off
Shade
accentgraybluegreenorangered
0
1.05
18.81
5
1.13
17.51
1.03
19.26
1.02
19.37
1.03
19.22
1.04
19.11
10
1.29
15.40
1.08
18.42
1.07
18.60
1.09
18.20
1.09
18.10
20
1.81
10.96
1.13
17.57
1.11
17.84
1.14
17.35
1.26
15.78
30
3.68
5.38
1.18
16.77
1.16
17.15
1.29
15.41
1.53
12.93
40
5.74
3.45
1.31
15.18
1.26
15.70
1.35
14.70
1.74
11.39
60
9.00
2.20
1.91
10.40
1.84
10.78
1.46
13.59
2.42
8.20
70
13.18
1.50
2.83
7.01
2.57
7.70
1.69
11.70
3.47
5.71
80
16.82
1.18
4.44
4.47
4.50
4.40
2.29
8.64
4.97
3.99
90
19.47
1.02
5.97
3.32
5.91
3.35
3.78
5.24
7.11
2.79
100
19.81
1.00
8.08
2.45
8.89
2.23
6.48
3.06
8.45
2.34

Data vis palette test#

Off
Add new color

Contrast tests#

Palettes are shown with white, dark and each of particular palette's color text on top. Dots are representing contrast ratio between background color and text color.

Combination of a background color and a text color is checked against color contrast requirements​. Green dot means at least WCAG Level AA (4.5:1) and red dot means too low (inaccessible) contrast ratio.

Accent#

accent0accent5accent10accent20accent30accent40accent60accent70accent80accent90accent100
white
accent0
accent5
accent10
accent20
accent30
accent40
accent60
accent70
accent80
accent90
accent100
gray100

Gray#

gray0gray5gray10gray20gray30gray40gray60gray70gray80gray90gray100
white
1.05
1.13
1.29
1.81
3.68
5.74
9.00
13.18
16.82
19.47
19.81
gray0
1.00
1.07
1.22
1.72
3.49
5.45
8.55
12.51
15.97
18.49
18.81
gray5
1.07
1.00
1.14
1.60
3.25
5.07
7.96
11.65
14.87
17.21
17.51
gray10
1.22
1.14
1.00
1.41
2.86
4.46
7.00
10.24
13.07
15.14
15.40
gray20
1.72
1.60
1.41
1.00
2.04
3.17
4.98
7.29
9.30
10.77
10.96
gray30
3.49
3.25
2.86
2.04
1.00
1.56
2.45
3.58
4.57
5.29
5.38
gray40
5.45
5.07
4.46
3.17
1.56
1.00
1.57
2.30
2.93
3.39
3.45
gray60
8.55
7.96
7.00
4.98
2.45
1.57
1.00
1.46
1.87
2.16
2.20
gray70
12.51
11.65
10.24
7.29
3.58
2.30
1.46
1.00
1.28
1.48
1.50
gray80
15.97
14.87
13.07
9.30
4.57
2.93
1.87
1.28
1.00
1.16
1.18
gray90
18.49
17.21
15.14
10.77
5.29
3.39
2.16
1.48
1.16
1.00
1.02
gray100
18.81
17.51
15.40
10.96
5.38
3.45
2.20
1.50
1.18
1.02
1.00

Blue#

blue5blue10blue20blue30blue40blue60blue70blue80blue90blue100
white
1.03
1.08
1.13
1.18
1.31
1.91
2.83
4.44
5.97
8.08
blue5
1.00
1.05
1.10
1.15
1.27
1.85
2.75
4.31
5.81
7.86
blue10
1.05
1.00
1.05
1.10
1.21
1.77
2.63
4.13
5.55
7.51
blue20
1.10
1.05
1.00
1.05
1.16
1.69
2.51
3.93
5.30
7.17
blue30
1.15
1.10
1.05
1.00
1.11
1.61
2.39
3.76
5.06
6.84
blue40
1.27
1.21
1.16
1.11
1.00
1.46
2.16
3.40
4.58
6.19
blue60
1.85
1.77
1.69
1.61
1.46
1.00
1.48
2.33
3.13
4.24
blue70
2.75
2.63
2.51
2.39
2.16
1.48
1.00
1.57
2.11
2.86
blue80
4.31
4.13
3.93
3.76
3.40
2.33
1.57
1.00
1.35
1.82
blue90
5.81
5.55
5.30
5.06
4.58
3.13
2.11
1.35
1.00
1.35
blue100
7.86
7.51
7.17
6.84
6.19
4.24
2.86
1.82
1.35
1.00
gray100
19.26
18.42
17.57
16.77
15.18
10.40
7.01
4.47
3.32
2.45

Green#

green5green10green20green30green40green60green70green80green90green100
white
1.02
1.07
1.11
1.16
1.26
1.84
2.57
4.50
5.91
8.89
green5
1.00
1.04
1.09
1.13
1.23
1.80
2.52
4.40
5.78
8.69
green10
1.04
1.00
1.04
1.08
1.18
1.73
2.42
4.23
5.55
8.35
green20
1.09
1.04
1.00
1.04
1.14
1.65
2.32
4.06
5.32
8.01
green30
1.13
1.08
1.04
1.00
1.09
1.59
2.23
3.90
5.11
7.70
green40
1.23
1.18
1.14
1.09
1.00
1.46
2.04
3.57
4.68
7.04
green60
1.80
1.73
1.65
1.59
1.46
1.00
1.40
2.45
3.22
4.84
green70
2.52
2.42
2.32
2.23
2.04
1.40
1.00
1.75
2.30
3.46
green80
4.40
4.23
4.06
3.90
3.57
2.45
1.75
1.00
1.31
1.97
green90
5.78
5.55
5.32
5.11
4.68
3.22
2.30
1.31
1.00
1.50
green100
8.69
8.35
8.01
7.70
7.04
4.84
3.46
1.97
1.50
1.00
gray100
19.37
18.60
17.84
17.15
15.70
10.78
7.70
4.40
3.35
2.23

Orange#

orange5orange10orange20orange30orange40orange60orange70orange80orange90orange100
white
1.03
1.09
1.14
1.29
1.35
1.46
1.69
2.29
3.78
6.48
orange5
1.00
1.06
1.11
1.25
1.31
1.41
1.64
2.22
3.67
6.29
orange10
1.06
1.00
1.05
1.18
1.24
1.34
1.56
2.11
3.47
5.95
orange20
1.11
1.05
1.00
1.13
1.18
1.28
1.48
2.01
3.31
5.68
orange30
1.25
1.18
1.13
1.00
1.05
1.13
1.32
1.78
2.94
5.04
orange40
1.31
1.24
1.18
1.05
1.00
1.08
1.26
1.70
2.81
4.81
orange60
1.41
1.34
1.28
1.13
1.08
1.00
1.16
1.57
2.59
4.44
orange70
1.64
1.56
1.48
1.32
1.26
1.16
1.00
1.35
2.23
3.83
orange80
2.22
2.11
2.01
1.78
1.70
1.57
1.35
1.00
1.65
2.83
orange90
3.67
3.47
3.31
2.94
2.81
2.59
2.23
1.65
1.00
1.71
orange100
6.29
5.95
5.68
5.04
4.81
4.44
3.83
2.83
1.71
1.00
gray100
19.22
18.20
17.35
15.41
14.70
13.59
11.70
8.64
5.24
3.06

Red#

red5red10red20red30red40red60red70red80red90red100
white
1.04
1.09
1.26
1.53
1.74
2.42
3.47
4.97
7.11
8.45
red5
1.00
1.06
1.21
1.48
1.68
2.33
3.35
4.79
6.86
8.15
red10
1.06
1.00
1.15
1.40
1.59
2.21
3.17
4.54
6.49
7.72
red20
1.21
1.15
1.00
1.22
1.39
1.92
2.77
3.95
5.66
6.73
red30
1.48
1.40
1.22
1.00
1.14
1.58
2.27
3.24
4.64
5.52
red40
1.68
1.59
1.39
1.14
1.00
1.39
2.00
2.85
4.08
4.86
red60
2.33
2.21
1.92
1.58
1.39
1.00
1.44
2.06
2.94
3.50
red70
3.35
3.17
2.77
2.27
2.00
1.44
1.00
1.43
2.05
2.43
red80
4.79
4.54
3.95
3.24
2.85
2.06
1.43
1.00
1.43
1.70
red90
6.86
6.49
5.66
4.64
4.08
2.94
2.05
1.43
1.00
1.19
red100
8.15
7.72
6.73
5.52
4.86
3.50
2.43
1.70
1.19
1.00
gray100
19.11
18.10
15.78
12.93
11.39
8.20
5.71
3.99
2.79
2.34