1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
/*
Less colors
*/
#yellow {
#short {
color: #fea;
}
#long {
color: #ffeeaa;
}
}
#blue {
#short {
color: #00f;
}
#long {
color: #0000ff;
}
}
#overflow {
.a { color: #111111 - #444444; } // #000000
.b { color: #eee + #fff; } // #ffffff
.c { color: #aaa * 3; } // #ffffff
.d { color: #00ee00 + #009900; } // #00ff00
}
#grey {
color: rgb(200, 200, 200);
}
/*
Colors as ID's
*/
#808080 {
color: hsl(50, 0%, 50%);
}
#00ff00 {
color: hsl(120, 100%, 50%);
}
/*
color functions
*/
.hsl {
color: hsl(0, 100%, 100%);
color: hsl(100, 100%, 100%);
color: hsl(0, 0%, 0%);
color: hsl(100, 0%, 0%);
}
.saturate {
color: saturate(#555, 1%);
color: saturate(#555, 10%);
color: saturate(#555, 20%);
color: saturate(#555, 40%);
color: saturate(#555, 60%);
color: saturate(#555, 100%);
color: saturate(#000, 100%);
color: saturate(#000, 0%);
color: saturate(#fff, 100%);
color: saturate(#fff, 0%);
color: saturate(#29332f, 1%);
color: saturate(#29332f, 10%);
color: saturate(#29332f, 20%);
color: saturate(#29332f, 40%);
color: saturate(#29332f, 60%);
color: saturate(#29332f, 100%);
}
.desaturate {
color: desaturate(#555, 1%);
color: desaturate(#555, 10%);
color: desaturate(#555, 20%);
color: desaturate(#555, 40%);
color: desaturate(#555, 60%);
color: desaturate(#555, 100%);
color: desaturate(#000, 100%);
color: desaturate(#000, 0%);
color: desaturate(#fff, 100%);
color: desaturate(#fff, 0%);
color: desaturate(#29332f, 1%);
color: desaturate(#29332f, 10%);
color: desaturate(#29332f, 20%);
color: desaturate(#29332f, 40%);
color: desaturate(#29332f, 60%);
color: desaturate(#29332f, 100%);
}
.lighten {
color: lighten(#555, 1%);
color: lighten(#555, 10%);
color: lighten(#555, 20%);
color: lighten(#555, 40%);
color: lighten(#555, 60%);
color: lighten(#555, 100%);
color: lighten(#000, 100%);
color: lighten(#000, 0%);
color: lighten(#fff, 100%);
color: lighten(#fff, 0%);
color: lighten(#29332f, 1%);
color: lighten(#29332f, 10%);
color: lighten(#29332f, 20%);
color: lighten(#29332f, 40%);
color: lighten(#29332f, 60%);
color: lighten(#29332f, 100%);
}
.darken {
color: darken(#555, 1%);
color: darken(#555, 10%);
color: darken(#555, 20%);
color: darken(#555, 40%);
color: darken(#555, 60%);
color: darken(#555, 100%);
color: darken(#000, 100%);
color: darken(#000, 0%);
color: darken(#fff, 100%);
color: darken(#fff, 0%);
color: darken(#29332f, 1%);
color: darken(#29332f, 10%);
color: darken(#29332f, 20%);
color: darken(#29332f, 40%);
color: darken(#29332f, 60%);
color: darken(#29332f, 100%);
}
.spin {
color: spin(#555, 1);
color: spin(#555, -10);
color: spin(#555, 20);
color: spin(#555, -40);
color: spin(#555, 60);
color: spin(#555, -100);
color: spin(#000, 100);
color: spin(#000, 0);
color: spin(#fff, 100);
color: spin(#fff, 0);
color: spin(#29332f, 1);
color: spin(#29332f, -10);
color: spin(#29332f, 20);
color: spin(#29332f, -40);
color: spin(#29332f, 60);
color: spin(#29332f, 100);
}
.greyscale {
color: greyscale(#000, 100%);
color: greyscale(#000, 0%);
color: greyscale(#fff, 100%);
color: greyscale(#fff, 0%);
color: greyscale(#29332f, 1%);
color: greyscale(#29332f, 10%);
color: greyscale(#29332f, 20%);
color: greyscale(#29332f, 40%);
color: greyscale(#29332f, 60%);
color: greyscale(#29332f, 100%);
}
.mix {
color: mix(#f00, #00f);
color: mix(#f00, #0ff);
color: mix(#f70, #0aa);
color: mix(#f00, #00f, 25%);
color: mix(#f00, #00f, 100%);
color: mix(#f00, #00f, 0%);
}
/*
Variables
*/
@base: #f04615;
.vars {
color: saturate(@base, 5%);
background-color: lighten(spin(@base, 8), 25%);
@new: hsl(hue(@base), 45%, 90%);
color: @new;
}
/*
Color names
*/
.names {
color: red;
color: darken(blue, 10%);
}
.alpha {
color: rgb(200, 200, 200, 100);
color: rgb(201, 200, 200, 0.5);
color: rgb(202, 200, 200, 0.0);
color: rgba(200, 201, 200, 100);
color: rgba(201, 200, 200, 0.5);
color: rgba(202, 200, 200, 0.0);
color: rgba(0, 0, 0, 0.0);
color: rgba(1, 0, 0, 0);
color: rgba(0%, 2%, 0%, 0%);
}
.fraction {
color: darken(#29332f, 45.3%);
color: lighten(#000, 93.5%);
color: mix(#f00, #00f, 98.9%);
color: spin(#29332f, 45.5);
color: greyscale(#29332f, 98.5%);
color: saturate(#29332f, 99.9%);
color: desaturate(#555, 1.5%);
}
|
