Wave logo
/
v1.9.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
solarMistgrayaquagreenyellowred
5
1.03
17.34
1.11
16.16
1.07
16.72
1.04
17.26
1.18
15.26
10
1.07
16.81
1.24
14.50
1.24
14.50
1.09
16.45
1.37
13.07
20
1.03
17.37
1.21
14.77
1.38
12.96
1.46
12.31
1.15
15.60
1.61
11.16
30
1.05
17.04
1.58
11.32
1.57
11.45
1.73
10.36
1.20
14.92
1.88
9.54
40
1.08
16.53
2.21
8.13
1.72
10.44
2.07
8.65
1.22
14.69
2.21
8.11
50
1.14
15.68
2.84
6.32
1.91
9.40
2.51
7.15
1.35
13.30
2.66
6.73
60
1.45
12.33
4.95
3.62
2.08
8.61
2.63
6.83
1.39
12.89
2.95
6.08
70
2.14
8.38
6.97
2.57
3.15
5.69
3.77
4.76
1.47
12.19
4.07
4.41
80
4.71
3.81
10.29
1.74
5.14
3.49
4.56
3.94
1.90
9.43
5.08
3.53
90
6.84
2.62
14.90
1.20
9.03
1.99
7.40
2.42
3.58
5.00
8.08
2.22
100
9.94
1.80
17.93
1.00
14.93
1.20
12.07
1.49
9.03
1.99
13.42
1.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.

Solar mist#

solarMist20solarMist30solarMist40solarMist50solarMist60solarMist70solarMist80solarMist90solarMist100
white
1.03
1.05
1.08
1.14
1.45
2.14
4.71
6.84
9.94
solarMist20
1.00
1.02
1.05
1.11
1.41
2.07
4.56
6.62
9.63
solarMist30
1.02
1.00
1.03
1.09
1.38
2.03
4.47
6.50
9.44
solarMist40
1.05
1.03
1.00
1.05
1.34
1.97
4.34
6.30
9.16
solarMist50
1.11
1.09
1.05
1.00
1.27
1.87
4.12
5.98
8.69
solarMist60
1.41
1.38
1.34
1.27
1.00
1.47
3.24
4.70
6.83
solarMist70
2.07
2.03
1.97
1.87
1.47
1.00
2.20
3.19
4.64
solarMist80
4.56
4.47
4.34
4.12
3.24
2.20
1.00
1.45
2.11
solarMist90
6.62
6.50
6.30
5.98
4.70
3.19
1.45
1.00
1.45
solarMist100
9.63
9.44
9.16
8.69
6.83
4.64
2.11
1.45
1.00
gray100
17.37
17.04
16.53
15.68
12.33
8.38
3.81
2.62
1.80

Gray#

gray5gray10gray20gray30gray40gray50gray60gray70gray80gray90gray100
white
1.03
1.07
1.21
1.58
2.21
2.84
4.95
6.97
10.29
14.90
17.93
gray5
1.00
1.03
1.17
1.53
2.13
2.75
4.79
6.74
9.95
14.41
17.34
gray10
1.03
1.00
1.14
1.49
2.07
2.66
4.64
6.53
9.64
13.97
16.81
gray20
1.17
1.14
1.00
1.31
1.82
2.34
4.07
5.74
8.47
12.27
14.77
gray30
1.53
1.49
1.31
1.00
1.39
1.79
3.12
4.40
6.49
9.40
11.32
gray40
2.13
2.07
1.82
1.39
1.00
1.29
2.24
3.16
4.67
6.76
8.13
gray50
2.75
2.66
2.34
1.79
1.29
1.00
1.74
2.46
3.62
5.25
6.32
gray60
4.79
4.64
4.07
3.12
2.24
1.74
1.00
1.41
2.08
3.01
3.62
gray70
6.74
6.53
5.74
4.40
3.16
2.46
1.41
1.00
1.48
2.14
2.57
gray80
9.95
9.64
8.47
6.49
4.67
3.62
2.08
1.48
1.00
1.45
1.74
gray90
14.41
13.97
12.27
9.40
6.76
5.25
3.01
2.14
1.45
1.00
1.20
gray100
17.34
16.81
14.77
11.32
8.13
6.32
3.62
2.57
1.74
1.20
1.00

Aqua#

aqua5aqua10aqua20aqua30aqua40aqua50aqua60aqua70aqua80aqua90aqua100
white
1.11
1.24
1.38
1.57
1.72
1.91
2.08
3.15
5.14
9.03
14.93
aqua5
1.00
1.11
1.25
1.41
1.55
1.72
1.88
2.84
4.63
8.13
13.45
aqua10
1.11
1.00
1.12
1.27
1.39
1.54
1.68
2.55
4.16
7.30
12.07
aqua20
1.25
1.12
1.00
1.13
1.24
1.38
1.51
2.28
3.72
6.52
10.79
aqua30
1.41
1.27
1.13
1.00
1.10
1.22
1.33
2.01
3.28
5.76
9.53
aqua40
1.55
1.39
1.24
1.10
1.00
1.11
1.21
1.83
2.99
5.26
8.69
aqua50
1.72
1.54
1.38
1.22
1.11
1.00
1.09
1.65
2.69
4.73
7.83
aqua60
1.88
1.68
1.51
1.33
1.21
1.09
1.00
1.51
2.47
4.33
7.17
aqua70
2.84
2.55
2.28
2.01
1.83
1.65
1.51
1.00
1.63
2.87
4.74
aqua80
4.63
4.16
3.72
3.28
2.99
2.69
2.47
1.63
1.00
1.76
2.90
aqua90
8.13
7.30
6.52
5.76
5.26
4.73
4.33
2.87
1.76
1.00
1.65
aqua100
13.45
12.07
10.79
9.53
8.69
7.83
7.17
4.74
2.90
1.65
1.00
gray100
16.16
14.50
12.96
11.45
10.44
9.40
8.61
5.69
3.49
1.99
1.20

Green#

green5green10green20green30green40green50green60green70green80green90green100
white
1.07
1.24
1.46
1.73
2.07
2.51
2.63
3.77
4.56
7.40
12.07
green5
1.00
1.15
1.36
1.61
1.93
2.34
2.45
3.51
4.25
6.90
11.25
green10
1.15
1.00
1.18
1.40
1.68
2.03
2.13
3.05
3.68
5.98
9.76
green20
1.36
1.18
1.00
1.19
1.42
1.72
1.80
2.59
3.13
5.08
8.29
green30
1.61
1.40
1.19
1.00
1.20
1.45
1.52
2.18
2.63
4.27
6.97
green40
1.93
1.68
1.42
1.20
1.00
1.21
1.27
1.82
2.20
3.57
5.82
green50
2.34
2.03
1.72
1.45
1.21
1.00
1.05
1.50
1.82
2.95
4.81
green60
2.45
2.13
1.80
1.52
1.27
1.05
1.00
1.43
1.73
2.82
4.59
green70
3.51
3.05
2.59
2.18
1.82
1.50
1.43
1.00
1.21
1.96
3.20
green80
4.25
3.68
3.13
2.63
2.20
1.82
1.73
1.21
1.00
1.62
2.65
green90
6.90
5.98
5.08
4.27
3.57
2.95
2.82
1.96
1.62
1.00
1.63
green100
11.25
9.76
8.29
6.97
5.82
4.81
4.59
3.20
2.65
1.63
1.00
gray100
16.72
14.50
12.31
10.36
8.65
7.15
6.83
4.76
3.94
2.42
1.49

Yellow#

yellow5yellow10yellow20yellow30yellow40yellow50yellow60yellow70yellow80yellow90yellow100
white
1.04
1.09
1.15
1.20
1.22
1.35
1.39
1.47
1.90
3.58
9.03
yellow5
1.00
1.05
1.11
1.16
1.18
1.30
1.34
1.42
1.83
3.45
8.69
yellow10
1.05
1.00
1.05
1.10
1.12
1.24
1.28
1.35
1.74
3.29
8.28
yellow20
1.11
1.05
1.00
1.05
1.06
1.17
1.21
1.28
1.65
3.12
7.85
yellow30
1.16
1.10
1.05
1.00
1.02
1.12
1.16
1.22
1.58
2.98
7.51
yellow40
1.18
1.12
1.06
1.02
1.00
1.10
1.14
1.21
1.56
2.94
7.40
yellow50
1.30
1.24
1.17
1.12
1.10
1.00
1.03
1.09
1.41
2.66
6.69
yellow60
1.34
1.28
1.21
1.16
1.14
1.03
1.00
1.06
1.37
2.58
6.49
yellow70
1.42
1.35
1.28
1.22
1.21
1.09
1.06
1.00
1.29
2.44
6.14
yellow80
1.83
1.74
1.65
1.58
1.56
1.41
1.37
1.29
1.00
1.89
4.75
yellow90
3.45
3.29
3.12
2.98
2.94
2.66
2.58
2.44
1.89
1.00
2.52
yellow100
8.69
8.28
7.85
7.51
7.40
6.69
6.49
6.14
4.75
2.52
1.00
gray100
17.26
16.45
15.60
14.92
14.69
13.30
12.89
12.19
9.43
5.00
1.99

Red#

red5red10red20red30red40red50red60red70red80red90red100
white
1.18
1.37
1.61
1.88
2.21
2.66
2.95
4.07
5.08
8.08
13.42
red5
1.00
1.17
1.37
1.60
1.88
2.27
2.51
3.46
4.32
6.87
11.42
red10
1.17
1.00
1.17
1.37
1.61
1.94
2.15
2.96
3.70
5.89
9.78
red20
1.37
1.17
1.00
1.17
1.38
1.66
1.84
2.53
3.16
5.03
8.35
red30
1.60
1.37
1.17
1.00
1.18
1.42
1.57
2.16
2.70
4.30
7.14
red40
1.88
1.61
1.38
1.18
1.00
1.20
1.33
1.84
2.30
3.65
6.07
red50
2.27
1.94
1.66
1.42
1.20
1.00
1.11
1.53
1.91
3.03
5.04
red60
2.51
2.15
1.84
1.57
1.33
1.11
1.00
1.38
1.72
2.74
4.55
red70
3.46
2.96
2.53
2.16
1.84
1.53
1.38
1.00
1.25
1.99
3.30
red80
4.32
3.70
3.16
2.70
2.30
1.91
1.72
1.25
1.00
1.59
2.64
red90
6.87
5.89
5.03
4.30
3.65
3.03
2.74
1.99
1.59
1.00
1.66
red100
11.42
9.78
8.35
7.14
6.07
5.04
4.55
3.30
2.64
1.66
1.00
gray100
15.26
13.07
11.16
9.54
8.11
6.73
6.08
4.41
3.53
2.22
1.34