All collections

Color-styles

224 custom properties · v0.4.3

Base

2
White
#ffffff
Black
#151516

Gray

12
25
#f8f9fb
50
#f8f9fb
100
#f1f3f7
200
#dfe1e6
300
#b4babf
400
#9fa8b0
500
#70787d
600
#5c6266
700
#464a4d
800
#36393c
900
#282a2d
950
#212224

Brand

11
50
#fef9f9
100
#fde9ea
200
#fcbfc2
300
#fb8f94
400
#fa5860
500
#db1a24
600
#c30b15
700
#970109
800
#790005
900
#5c0003
950
#4d0003

Green

11
50
#f5fdfa
100
#d1f5ea
200
#7be2c2
300
#00c88a
400
#00a774
500
#00875d
600
#00704d
700
#0e5341
800
#033f2f
900
#083126
950
#07271f

Blue

11
50
#f9fcfe
100
#e1f0f9
200
#aad4ee
300
#6fb6e1
400
#3c9cd7
500
#237ab8
600
#1e5da6
700
#224599
800
#2a337a
900
#192164
950
#131a54

Rosé

11
50
#fffafe
100
#ffe7fa
200
#ffc4f2
300
#ffa6eb
400
#e86ac9
500
#c74390
600
#aa2474
700
#881c55
800
#76013a
900
#5d0024
950
#4a001c

Orange

11
50
#fffaf6
100
#ffe9db
200
#ffc299
300
#ff9248
400
#ff6701
500
#c75101
600
#a54201
700
#7d3200
800
#622700
900
#491d00
950
#3b1800

Yellow

11
50
#fffef4
100
#ffffe4
200
#ffffb5
300
#fff372
400
#ffde4a
500
#f9ba1a
600
#b77d00
700
#7d5407
800
#653d00
900
#4f3300
950
#352700

Success

11
50
#f5fdfa
100
#d1f5ea
200
#7be2c2
300
#00c88a
400
#00a774
500
#00875d
600
#00704d
700
#0e5341
800
#033f2f
900
#083126
950
#07271f

Warning

11
50
#fffef4
100
#ffffe4
200
#ffffb5
300
#fff372
400
#ffde4a
500
#f9ba1a
600
#b77d00
700
#7d5407
800
#653d00
900
#4f3300
950
#352700

Error

11
50
#fef9f9
100
#fde9ea
200
#fcbfc2
300
#fb8f94
400
#fa5860
500
#db1a24
600
#c30b15
700
#970109
800
#790005
900
#5c0003
950
#4d0003

Gradient

3
Gradient: Text on image
linear-gradient(180deg, #44505a00 0%, #44505a 100%)
skeuemorphic-gradient-border
linear-gradient(180deg, #ffffff1f 0%, #ffffff00 100%)
UI Fade
linear-gradient(180deg, #ffffff00 0%, #ffffff 100%)

Gradient / Gray

12
500 -> 400 (90deg)
linear-gradient(90deg, #70787d 0%, #9fa8b0 100%)
600 -> 500 (45deg)
linear-gradient(45deg, #5c6266 0%, #70787d 100%)
700 -> 500 (45deg)
linear-gradient(45deg, #464a4d 0%, #70787d 100%)
700 -> 500 (90deg)
linear-gradient(90deg, #464a4d 0%, #70787d 100%)
700 -> 600 (26-5deg)
linear-gradient(180deg, #464a4d 0%, #5c6266 100%)
800 -> 500 (45deg)
linear-gradient(45deg, #36393c 0%, #70787d 100%)
800 -> 600 (45deg)
linear-gradient(45deg, #36393c 0%, #5c6266 100%)
50 -> white (180deg)
linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%)
100 -> white (180deg)
linear-gradient(180deg, #ffffff 0%, #f1f3f7 100%)
100 -> 50 (180deg)
linear-gradient(180deg, #f8f9fb 0%, #f1f3f7 100%)
200 -> 50 (180deg)
linear-gradient(180deg, #f8f9fb 0%, #dfe1e6 100%)
200 -> 100 (180deg)
linear-gradient(180deg, #f1f3f7 0%, #dfe1e6 100%)

Gradient / Brand

7
500 -> 400 (90deg)
linear-gradient(90deg, #db1a24 0%, #fa5860 100%)
600 -> 500 (45deg)
linear-gradient(45deg, #c30b15 0%, #db1a24 100%)
700 -> 500 (45deg)
linear-gradient(45deg, #970109 0%, #db1a24 100%)
700 -> 500 (90deg)
linear-gradient(90deg, #970109 0%, #db1a24 100%)
700 -> 600 (26-5deg)
linear-gradient(180deg, #970109 0%, #c30b15 100%)
800 -> 500 (45deg)
linear-gradient(45deg, #790005 0%, #db1a24 100%)
800 -> 600 (45deg)
linear-gradient(45deg, #790005 0%, #c30b15 100%)

Gradient / Linear

89
10
linear-gradient(180deg, #cfc7f8 0%, #ebbba7 100%)
11
linear-gradient(180deg, #fccb90 0%, #d57eeb 100%)
12
linear-gradient(180deg, #7b6ae0 0%, #ffbb89 100%)
13
linear-gradient(180deg, #e0c3fc 0%, #8ec5fc 100%)
14
linear-gradient(180deg, #fed6e3 0%, #a8edea 100%)
15
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%)
16
linear-gradient(180deg, #dfd1c5 0%, #fff6eb 100%)
17
linear-gradient(180deg, #fff6b7 0%, #fb758a 100%)
18
linear-gradient(180deg, #ff7ec7 0%, #ffed46 100%)
19
linear-gradient(180deg, #feafa8 0%, #f5efef 100%)
20
linear-gradient(180deg, #e9defa 0%, #fff6eb 100%)
21
linear-gradient(180deg, #fff1eb 0%, #ace0f9 100%)
22
linear-gradient(180deg, #c1dfc4 0%, #deecdd 100%)
24
linear-gradient(180deg, #accbee 0%, #e7f0fd 100%)
25
linear-gradient(180deg, #84fab0 0%, #accbee 100%)
26
linear-gradient(180deg, #39a0ff 0%, #8fff85 100%)
27
linear-gradient(180deg, #74ebd5 0%, #9face6 100%)
29
linear-gradient(180deg, #9890e3 0%, #b1f4cf 100%)
30
linear-gradient(180deg, #7cdada 0%, #f697aa 100%)
31
linear-gradient(180deg, #b1ff96 0%, #ffadf7 100%)
32
linear-gradient(180deg, #96fbc4 0%, #f9f586 100%)
33
linear-gradient(180deg, #4def8e 0%, #ffeb3a 100%)
34
linear-gradient(180deg, #f0ff00 0%, #58cffb 100%)
35
linear-gradient(180deg, #d1fdff 0%, #fddb92 100%)
36
linear-gradient(180deg, #ebc0fd 0%, #d9ded8 100%)
37
linear-gradient(180deg, #ffa4f6 0%, #b7dcff 100%)
38
linear-gradient(180deg, #cd9cf2 0%, #f6f3ff 100%)
39
linear-gradient(180deg, #f5c8f5 0%, #daddfa 84%)
40
linear-gradient(180deg, #e6dee9 0%, #bdc2e8 100%)
41
linear-gradient(180deg, #6a85b6 0%, #bac8e0 100%)
42
linear-gradient(180deg, #8b8b8b 0%, #eaeaea 100%)
43
linear-gradient(180deg, #e2b0ff 0%, #9f44d3 100%)
44
linear-gradient(180deg, #ce9ffc 0%, #7367f0 100%)
45
linear-gradient(180deg, #72edf2 0%, #5151e5 100%)
46
linear-gradient(180deg, #a3bded 0%, #6991c7 100%)
47
linear-gradient(180deg, #fbc8d4 0%, #9795f0 100%)
48
linear-gradient(180deg, #a7a6cb 0%, #8989ba 100%)
49
linear-gradient(180deg, #d9afd9 0%, #97d9e1 100%)
50
linear-gradient(180deg, #81ffef 0%, #f067b4 100%)
51
linear-gradient(180deg, #dcb0ed 0%, #9999cc 100%)
52
linear-gradient(180deg, #fff5c3 0%, #9452a5 100%)
53
linear-gradient(180deg, #f1ca74 0%, #a64db6 100%)
54
linear-gradient(180deg, #4d6ad0 0%, #ff9d7e 100%)
55
linear-gradient(180deg, #ffcf71 0%, #2376dd 100%)
56
linear-gradient(180deg, #e8d07a 0%, #5312d6 100%)
57
linear-gradient(180deg, #bfd9fe 0%, #df89b5 100%)
58
linear-gradient(180deg, #fa71cd 0%, #c471f5 100%)
59
linear-gradient(180deg, #43cbff 0%, #9708cc 100%)
60
linear-gradient(180deg, #7579ff 0%, #b224ef 100%)
61
linear-gradient(180deg, #ad00fe 0%, #00e0ee 100%)
62
linear-gradient(180deg, #89f7fe 0%, #66a6ff 100%)
63
linear-gradient(180deg, #009efd 0%, #2af598 100%)
64
linear-gradient(180deg, #ffb800 0%, #fff500 100%)
65
linear-gradient(180deg, #ffa8a8 0%, #fcff00 100%)
66
linear-gradient(180deg, #ff7a00 0%, #ffd439 100%)
67
linear-gradient(180deg, #ffd3a5 0%, #fd6585 100%)
68
linear-gradient(180deg, #f9d423 0%, #e14fad 100%)
69
linear-gradient(180deg, #f74fac 0%, #fcb24f 100%)
70
linear-gradient(180deg, #f49062 0%, #fd371f 100%)
71
linear-gradient(180deg, #ff6c6c 0%, #dd7bff 100%)
72
linear-gradient(180deg, #f97794 0%, #623aa2 100%)
73
linear-gradient(180deg, #c569cf 0%, #ee609c 100%)
74
linear-gradient(180deg, #c7eafd 0%, #e8198b 100%)
75
linear-gradient(180deg, #f093fb 0%, #f5576c 100%)
76
linear-gradient(180deg, #f6ceec 0%, #d939cd 100%)
77
linear-gradient(180deg, #ee9ae5 0%, #5961f9 100%)
78
linear-gradient(180deg, #6a11cb 0%, #2575fc 100%)
79
linear-gradient(180deg, #0017e4 0%, #3793ff 100%)
80
linear-gradient(180deg, #00c6fb 0%, #005bea 100%)
81
linear-gradient(180deg, #4b73ff 0%, #7cf7ff 100%)
82
linear-gradient(180deg, #5efce8 0%, #736efe 100%)
83
linear-gradient(180deg, #7028e4 0%, #e5b2ca 100%)
84
linear-gradient(180deg, #7873f5 0%, #ec77ab 100%)
85
linear-gradient(180deg, #b01eff 0%, #e1467c 100%)
86
linear-gradient(180deg, #d079ee 0%, #8a88fb 100%)
87
linear-gradient(180deg, #c99fff 0%, #981ed2 100%)
88
linear-gradient(180deg, #9b23ea 0%, #5f72bd 100%)
89
linear-gradient(180deg, #b39fff 0%, #6a1ed2 100%)
90
linear-gradient(180deg, #4300b1 0%, #a531dc 100%)
91
linear-gradient(180deg, #764ba2 0%, #667eea 100%)
01
linear-gradient(180deg, #a5c0ee 0%, #fbc5ec 100%)
02
linear-gradient(180deg, #fbc2eb 0%, #a18cd1 100%)
03
linear-gradient(180deg, #ffd1ff 0%, #fad0c4 100%)
04
linear-gradient(180deg, #fad0c4 0%, #ff9a9e 100%)
05
linear-gradient(180deg, #fcb69f 0%, #ffecd2 100%)
06
linear-gradient(180deg, #fecfef 0%, #ff989c 100%)
07
linear-gradient(180deg, #ff9de4 0%, #ffeaf6 100%)
08
linear-gradient(180deg, #e6dee9 0%, #fdcaf1 100%)
09
linear-gradient(180deg, #a6c0fe 0%, #ffeaf6 100%)