References

Colors

5.5
fade#63697c
5.4
gray#6a6a6c
5.4
brown#8a604c
5.4
orange#a15717
5.4
gold#906000
5.4
yellow#806700
5.4
grass#4e750e
5.4
green#067b34
5.4
beryl#007954
5.4
teal#00776f
5.4
cyan#007391
5.4
sky#086eb3
5.5
blue#175fe9
5.4
indigo#5a5bd5
5.4
violet#7949e5
5.4
purple#9832e4
5.4
fuchsia#b61cbb
5.4
pink#ca1473
5.4
crimson#ce1a4b
5.4
red#d11a1e

Overview

The palettes comply WCAG 2.0 4.5:1 contrast ratio at Level AA.

102030405060708090

A range of out-of-the-box color palettes with levels from 2, 4, 6 ... 98.

fade#63697c
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
gray#6a6a6c
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
brown#8a604c
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
orange#a15717
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
gold#906000
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
yellow#806700
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
grass#4e750e
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
green#067b34
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
beryl#007954
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
teal#00776f
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
cyan#007391
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
sky#086eb3
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
blue#175fe9
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
indigo#5a5bd5
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
violet#7949e5
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
purple#9832e4
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
fuchsia#b61cbb
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
pink#ca1473
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
crimson#ce1a4b
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98
red#d11a1e
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
72
74
76
78
80
82
84
86
88
90
92
94
96
98

Other palettes

We've organized some well-known palettes, just copying and pasting to import them completely.

IBM

The IBM Color palette is blue at the core, expanding across color families and gradients, using specifications to represent mankind and machine in action.

/* 1. Prevent @master/css from initializing automatically */
window.MasterCSSManual = true;
/* 2. Access APIs */
import { init, Style } from '@master/css';
/* 3. Customize initial configurations here ... */
Style.extend('colors', {
    red:            { 100: '2d0709', 90: '520408', 80: '750e13', 70: 'a2191f', 60: 'da1e28', 50: 'fa4d56', 40: 'ff8389', 30: 'ffb3b8', 20: 'ffd7d9', 10: 'fff1f1' },
    magenta:        { 100: '2a0a18', 90: '510224', 80: '740937', 70: '9f1853', 60: 'd02670', 50: 'ee5396', 40: 'ff7eb6', 30: 'ffafd2', 20: 'ffd6e8', 10: 'fff0f7' },
    purple:         { 100: '1c0f30', 90: '31135e', 80: '491d8b', 70: '6929c4', 60: '8a3ffc', 50: 'a56eff', 40: 'be95ff', 30: 'd4bbff', 20: 'e8daff', 10: 'f6f2ff' },
    blue:           { 100: '001141', 90: '001d6c', 80: '002d9c', 70: '0043ce', 60: '0f62fe', 50: '4589ff', 40: '78a9ff', 30: 'a6c8ff', 20: 'd0e2ff', 10: 'edf5ff' },
    cyna:           { 100: '061727', 90: '012749', 80: '003a6d', 70: '00539a', 60: '0072c3', 50: '1192e8', 40: '33b1ff', 30: '82cfff', 20: 'bae6ff', 10: 'e5f6ff' },
    teal:           { 100: '081a1c', 90: '022b30', 80: '004144', 70: '005d5d', 60: '007d79', 50: '009d9a', 40: '08bdba', 30: '3ddbd9', 20: '9ef0f0', 10: 'd9fbfb' },
    green:          { 100: '071908', 90: '022d0d', 80: '044317', 70: '0e6027', 60: '198038', 50: '24a148', 40: '42be65', 30: '6fdc8c', 20: 'a7f0ba', 10: 'defbe6' },
    gray:           { 100: '161616', 90: '262626', 80: '393939', 70: '525252', 60: '6f6f6f', 50: '8d8d8d', 40: 'a8a8a8', 30: 'c6c6c6', 20: 'e0e0e0', 10: 'f4f4f4' },
    'coll-gray':    { 100: '121619', 90: '21272a', 80: '343a3f', 70: '4d5358', 60: '697077', 50: '878d96', 40: 'a2a9b0', 30: 'c1c7cd', 20: 'dde1e6', 10: 'f2f4f8' },
    'warn-gray':    { 100: '171414', 90: '272525', 80: '3c3838', 70: '565151', 60: '726e6e', 50: '8f8b8b', 40: 'ada8a8', 30: 'cac5c4', 20: 'e5e0df', 10: 'f7f3f2' },
})
/* 4. Manually initialize */
init()
© Aoyue Design LLC.
Issue on this page
Edited byMilesAron