compass-blend-modes 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,39 @@
1
+ // Import the Compass Plugin
2
+ @import "blend-modes";
3
+
4
+ // Plain Colors
5
+ $foreground-color: #7FFFD4;
6
+ $background-color: #DEB887;
7
+ .foreground { background-color: $foreground-color; }
8
+ .background { background-color: $background-color; }
9
+
10
+ // Blended Colors
11
+ .normal { background-color: blend-normal($foreground-color, $background-color); }
12
+ .multiply { background-color: blend-multiply($foreground-color, $background-color); }
13
+ .lighten { background-color: blend-lighten($foreground-color, $background-color); }
14
+ .darken { background-color: blend-darken($foreground-color, $background-color); }
15
+ .darkercolor { background-color: blend-darkercolor($foreground-color, $background-color); }
16
+ .lightercolor { background-color: blend-lightercolor($foreground-color, $background-color); }
17
+ .lineardodge { background-color: blend-lineardodge($foreground-color, $background-color); }
18
+ .linearburn { background-color: blend-linearburn($foreground-color, $background-color); }
19
+ .difference { background-color: blend-difference($foreground-color, $background-color); }
20
+ .screen { background-color: blend-screen($foreground-color, $background-color); }
21
+ .exclusion { background-color: blend-exclusion($foreground-color, $background-color); }
22
+ .overlay { background-color: blend-overlay($foreground-color, $background-color); }
23
+ .softlight { background-color: blend-softlight($foreground-color, $background-color); }
24
+ .hardlight { background-color: blend-hardlight($foreground-color, $background-color); }
25
+ .colordodge { background-color: blend-colordodge($foreground-color, $background-color); }
26
+ .colorburn { background-color: blend-colorburn($foreground-color, $background-color); }
27
+ .linearlight { background-color: blend-linearlight($foreground-color, $background-color); }
28
+ .vividlight { background-color: blend-vividlight($foreground-color, $background-color); }
29
+ .pinlight { background-color: blend-pinlight($foreground-color, $background-color); }
30
+ .hardmix { background-color: blend-hardmix($foreground-color, $background-color); }
31
+
32
+
33
+ .colorblend { background-color: blend-colorblend($foreground-color, $background-color); }
34
+ .dissolve { background-color: blend-dissolve($foreground-color, $background-color); }
35
+ .divide { background-color: blend-divide($foreground-color, $background-color); }
36
+ .hue { background-color: blend-hue($foreground-color, $background-color); }
37
+ .luminosity { background-color: blend-luminosity($foreground-color, $background-color); }
38
+ .saturation { background-color: blend-saturation($foreground-color, $background-color); }
39
+ .subtract { background-color: blend-subtract($foreground-color, $background-color); }
@@ -0,0 +1,2 @@
1
+ require 'compass' # Ensure Compass
2
+ require 'compass/blend-modes'
@@ -0,0 +1,7 @@
1
+ require 'compass/blend-modes/version'
2
+
3
+ module Compass
4
+ module BlendModes
5
+ Compass::Frameworks.register('blend-modes', :path => "#{File.dirname(__FILE__)}/../..")
6
+ end
7
+ end
@@ -0,0 +1,5 @@
1
+ module Compass
2
+ module BlendModes
3
+ VERSION = '0.0.2'
4
+ end
5
+ end
@@ -0,0 +1,528 @@
1
+ //--------------------------------
2
+ // Normal
3
+ //--------------------------------
4
+ @function blend-normal ($foreground, $background) {
5
+ $opacity: opacity($foreground);
6
+ $background-opacity: opacity($background);
7
+
8
+ // calculate opacity
9
+ $bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity);
10
+ $bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity);
11
+ $bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity);
12
+ @return rgb($bm-red, $bm-green, $bm-blue);
13
+ }
14
+
15
+ //--------------------------------
16
+ // Multiply
17
+ //--------------------------------
18
+ @function blend-multiply ($foreground, $background) {
19
+ $bm-red: red($background) * red($foreground) / 255;
20
+ $bm-green: green($background) * green($foreground) / 255;
21
+ $bm-blue: blue($background) * blue($foreground) / 255;
22
+
23
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
24
+ }
25
+
26
+ //--------------------------------
27
+ // Lighten
28
+ //--------------------------------
29
+ @function blend-lighten ($foreground, $background) {
30
+ $bm-red: blend-lighten-color(red($foreground), red($background));
31
+ $bm-green: blend-lighten-color(green($foreground), green($background));
32
+ $bm-blue: blend-lighten-color(blue($foreground), blue($background));
33
+
34
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
35
+ }
36
+ @function blend-lighten-color($foreground, $background) {
37
+ @if $background > $foreground {
38
+ $foreground: $background;
39
+ }
40
+ @return $foreground;
41
+ }
42
+
43
+ //--------------------------------
44
+ // Darken
45
+ //--------------------------------
46
+ @function blend-darken ($foreground, $background) {
47
+ $bm-red: blend-darken-color(red($foreground), red($background));
48
+ $bm-green: blend-darken-color(green($foreground), green($background));
49
+ $bm-blue: blend-darken-color(blue($foreground), blue($background));
50
+
51
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
52
+ }
53
+ @function blend-darken-color($foreground, $background) {
54
+ @if $background < $foreground {
55
+ $foreground: $background;
56
+ }
57
+ @return $foreground;
58
+ }
59
+
60
+ //--------------------------------
61
+ // Darker Color
62
+ //--------------------------------
63
+ @function blend-darkercolor ($foreground, $background) {
64
+ $bm-red: red($foreground);
65
+ $bm-green: green($foreground);
66
+ $bm-blue: blue($foreground);
67
+ $background-red: red($background);
68
+ $background-green: green($background);
69
+ $background-blue: blue($background);
70
+
71
+ @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 <= $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
72
+ $bm-red: $background-red;
73
+ $bm-green: $background-green;
74
+ $bm-blue: $background-blue;
75
+ }
76
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
77
+ }
78
+
79
+ //--------------------------------
80
+ // Lighter Color
81
+ //--------------------------------
82
+ @function blend-lightercolor ($foreground, $background) {
83
+ $bm-red: red($foreground);
84
+ $bm-green: green($foreground);
85
+ $bm-blue: blue($foreground);
86
+ $background-red: red($background);
87
+ $background-green: green($background);
88
+ $background-blue: blue($background);
89
+
90
+ @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 > $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
91
+ $bm-red: $background-red;
92
+ $bm-green: $background-green;
93
+ $bm-blue: $background-blue;
94
+ }
95
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
96
+ }
97
+
98
+ //--------------------------------
99
+ // Linear Dodge
100
+ //--------------------------------
101
+ @function blend-lineardodge ($foreground, $background) {
102
+ $bm-red: blend-lineardodge-color(red($foreground), red($background));
103
+ $bm-green: blend-lineardodge-color(green($foreground), green($background));
104
+ $bm-blue: blend-lineardodge-color(blue($foreground), blue($background));
105
+
106
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
107
+ }
108
+ @function blend-lineardodge-color($foreground, $background) {
109
+ @if $background + $foreground > 255 {
110
+ $foreground: 255;
111
+ }
112
+ @else {
113
+ $foreground: $background + $foreground;
114
+ }
115
+ @return $foreground;
116
+ }
117
+
118
+ //--------------------------------
119
+ // Linear Burn
120
+ //--------------------------------
121
+ @function blend-linearburn ($foreground, $background) {
122
+ $bm-red: blend-linearburn-color(red($foreground), red($background));
123
+ $bm-green: blend-linearburn-color(green($foreground), green($background));
124
+ $bm-blue: blend-linearburn-color(blue($foreground), blue($background));
125
+
126
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
127
+ }
128
+ @function blend-linearburn-color($foreground, $background) {
129
+ @if $background + $foreground < 255 {
130
+ $foreground: 0;
131
+ }
132
+ @else {
133
+ $foreground: $background + $foreground - 255;
134
+ }
135
+ @return $foreground;
136
+ }
137
+
138
+ //--------------------------------
139
+ // Difference
140
+ //--------------------------------
141
+ @function blend-difference ($foreground, $background) {
142
+ $bm-red: abs(red($background) - red($foreground));
143
+ $bm-green: abs(green($background) - green($foreground));
144
+ $bm-blue: abs(blue($background) - blue($foreground));
145
+
146
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
147
+ }
148
+
149
+ //--------------------------------
150
+ // Screen
151
+ //--------------------------------
152
+ @function blend-screen ($foreground, $background) {
153
+ $bm-red: blend-screen-color(red($foreground), red($background));
154
+ $bm-green: blend-screen-color(green($foreground), green($background));
155
+ $bm-blue: blend-screen-color(blue($foreground), blue($background));
156
+
157
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
158
+ }
159
+ @function blend-screen-color($foreground, $background) {
160
+ @return (255 - ( ( (255 - $foreground) * (255 - $background)) / 256));
161
+ }
162
+
163
+ //--------------------------------
164
+ // Exclusion
165
+ //--------------------------------
166
+ @function blend-exclusion ($foreground, $background) {
167
+ $bm-red: blend-exclusion-color(red($foreground), red($background));
168
+ $bm-green: blend-exclusion-color(green($foreground), green($background));
169
+ $bm-blue: blend-exclusion-color(blue($foreground), blue($background));
170
+
171
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
172
+ }
173
+ @function blend-exclusion-color($foreground, $background) {
174
+ @return $background - ($background * (2 / 255) - 1) * $foreground;
175
+ }
176
+
177
+ //--------------------------------
178
+ // Overlay
179
+ //--------------------------------
180
+ @function blend-overlay ($foreground, $background) {
181
+ $bm-red: blend-overlay-color(red($foreground), red($background));
182
+ $bm-green: blend-overlay-color(green($foreground), green($background));
183
+ $bm-blue: blend-overlay-color(blue($foreground), blue($background));
184
+
185
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
186
+ }
187
+ @function blend-overlay-color($foreground, $background) {
188
+ @if $background <= 255 / 2 {
189
+ $foreground: (2 * $background * $foreground) / 255;
190
+ } @else {
191
+ $foreground: 255 - (255 - 2 * ($background - (255 / 2))) * (255 - $foreground) / 255;
192
+ }
193
+ @return $foreground;
194
+ }
195
+
196
+ //--------------------------------
197
+ // Soft Light
198
+ //--------------------------------
199
+ @function blend-softlight ($foreground, $background) {
200
+ $bm-red: blend-softlight-color(red($foreground), red($background));
201
+ $bm-green: blend-softlight-color(green($foreground), green($background));
202
+ $bm-blue: blend-softlight-color(blue($foreground), blue($background));
203
+
204
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
205
+ }
206
+ @function blend-softlight-color($foreground, $background) {
207
+ @if $background < 128 {
208
+ $foreground: (($foreground / 2) + 64) * $background * (2 / 255);
209
+ } @else {
210
+ $foreground: 255 - (191 - ($foreground / 2)) * (255 - $background) * (2 / 255);
211
+ }
212
+ @return $foreground;
213
+ }
214
+
215
+ //--------------------------------
216
+ // Hard Light
217
+ //--------------------------------
218
+ @function blend-hardlight ($foreground, $background) {
219
+ $bm-red: blend-hardlight-color(red($foreground), red($background));
220
+ $bm-green: blend-hardlight-color(green($foreground), green($background));
221
+ $bm-blue: blend-hardlight-color(blue($foreground), blue($background));
222
+
223
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
224
+ }
225
+ @function blend-hardlight-color($foreground, $background) {
226
+ $tmp-blend: $foreground;
227
+ @if $tmp-blend < 128 {
228
+ $foreground: $background * $tmp-blend * (2 / 255);
229
+ } @else {
230
+ $foreground: 255 - (255-$background) * (255-$tmp-blend) * (2 / 255);
231
+ }
232
+ @return $foreground;
233
+ }
234
+
235
+ //--------------------------------
236
+ // Color Dodge
237
+ //--------------------------------
238
+ @function blend-colordodge ($foreground, $background) {
239
+ $bm-red: blend-colordodge-color(red($foreground), red($background));
240
+ $bm-green: blend-colordodge-color(green($foreground), green($background));
241
+ $bm-blue: blend-colordodge-color(blue($foreground), blue($background));
242
+
243
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
244
+ }
245
+ @function blend-colordodge-color($foreground, $background) {
246
+ $tmp: $background * 256 / (255 - $foreground);
247
+ @if $tmp > 255 or $foreground == 255 {
248
+ $foreground: 255;
249
+ } @else {
250
+ $foreground: $tmp;
251
+ }
252
+ @return $foreground;
253
+ }
254
+
255
+ //--------------------------------
256
+ // Color Burn
257
+ //--------------------------------
258
+ @function blend-colorburn ($foreground, $background) {
259
+ $bm-red: blend-colorburn-color(red($foreground), red($background));
260
+ $bm-green: blend-colorburn-color(green($foreground), green($background));
261
+ $bm-blue: blend-colorburn-color(blue($foreground), blue($background));
262
+
263
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
264
+ }
265
+ @function blend-colorburn-color($foreground, $background) {
266
+ $tmp: (255 - ((255 - $background) * 255) / $foreground);
267
+
268
+ // TODO: hacked to replicate photoshop
269
+ @if $foreground == 0 {
270
+ $foreground: 255;
271
+ } @elseif $tmp < 0 {
272
+ $foreground: 0;
273
+ } @else {
274
+ $foreground: $tmp;
275
+ }
276
+ @return $foreground;
277
+ }
278
+
279
+ //--------------------------------
280
+ // Linear Light
281
+ //--------------------------------
282
+ @function blend-linearlight ($foreground, $background) {
283
+ $bm-red: blend-linearlight-color(red($foreground), red($background));
284
+ $bm-green: blend-linearlight-color(green($foreground), green($background));
285
+ $bm-blue: blend-linearlight-color(blue($foreground), blue($background));
286
+
287
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
288
+ }
289
+ @function blend-linearlight-color($foreground, $background) {
290
+ @if $foreground < 128 {
291
+ $foreground: blend-linearburn-color($background, 2 * $foreground);
292
+ } @else {
293
+ $foreground: blend-lineardodge-color($background, 2 * ($foreground - 128));
294
+ }
295
+ @return $foreground;
296
+ }
297
+
298
+ //--------------------------------
299
+ // Vivid Light
300
+ //--------------------------------
301
+ @function blend-vividlight ($foreground, $background) {
302
+ $bm-red: blend-vividlight-color(red($foreground), red($background));
303
+ $bm-green: blend-vividlight-color(green($foreground), green($background));
304
+ $bm-blue: blend-vividlight-color(blue($foreground), blue($background));
305
+
306
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
307
+ }
308
+
309
+ @function blend-vividlight-color($foreground, $background) {
310
+ @if $foreground < 128 {
311
+ $foreground: blend-colorburn-color(2 * $foreground, $background);
312
+ } @else {
313
+ $foreground: blend-colordodge-color(2 * ($foreground - 128), $background);
314
+ }
315
+ @return $foreground;
316
+ }
317
+
318
+ //--------------------------------
319
+ // Pin Light
320
+ //--------------------------------
321
+ @function blend-pinlight ($foreground, $background) {
322
+ $bm-red: blend-pinlight-color(red($foreground), red($background));
323
+ $bm-green: blend-pinlight-color(green($foreground), green($background));
324
+ $bm-blue: blend-pinlight-color(blue($foreground), blue($background));
325
+
326
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
327
+ }
328
+
329
+ @function blend-pinlight-color($foreground, $background) {
330
+ @if $foreground < 128 {
331
+ $foreground: blend-darken-color($background, 2 * $foreground);
332
+ } @else {
333
+ $foreground: blend-lighten-color($background, 2 * ($foreground - 128));
334
+ }
335
+ @return $foreground;
336
+ }
337
+
338
+ //--------------------------------
339
+ // Hard Mix
340
+ //--------------------------------
341
+ @function blend-hardmix ($foreground, $background) {
342
+ $bm-red: blend-hardmix-color(red($foreground), red($background));
343
+ $bm-green: blend-hardmix-color(green($foreground), green($background));
344
+ $bm-blue: blend-hardmix-color(blue($foreground), blue($background));
345
+
346
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
347
+ }
348
+
349
+ @function blend-hardmix-color($foreground, $background) {
350
+ $tmp: blend-vividlight-color($foreground, $background);
351
+ @if $tmp < 128 {
352
+ $foreground: 0;
353
+ } @else {
354
+ $foreground: 255;
355
+ }
356
+ @return $foreground;
357
+ }
358
+
359
+
360
+ // Unique to Photoshop
361
+
362
+ //--------------------------------
363
+ // Color Blend
364
+ //--------------------------------
365
+ @function blend-colorblend ($foreground, $background) {
366
+ $foreground-hsv: color-to-hsv($foreground);
367
+ $background-hsv: color-to-hsv($background);
368
+
369
+ $bm-hsv: nth($foreground-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
370
+ $bm-color: hsv-to-color($bm-hsv);
371
+
372
+ @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
373
+ }
374
+
375
+ //--------------------------------
376
+ // Dissolve
377
+ //--------------------------------
378
+ @function blend-dissolve ($foreground, $background) {
379
+ // The Dissolve blend mode acts on transparent and partially transparent pixels
380
+ // it treats transparency as a pixel pattern and applies a diffusion dither pattern.
381
+ // @see http://photoblogstop.com/photoshop/photoshop-blend-modes-explained
382
+ @return $foreground;
383
+ }
384
+
385
+ //--------------------------------
386
+ // Divide
387
+ //--------------------------------
388
+ @function blend-divide ($foreground, $background) {
389
+ $bm-red: blend-divide-colors(red($foreground), red($background));
390
+ $bm-green: blend-divide-colors(green($foreground), green($background));
391
+ $bm-blue:blend-divide-colors(blue($foreground), blue($background));
392
+
393
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
394
+ }
395
+ @function blend-divide-colors($foreground, $background) {
396
+ @return min((($background / 255) / ($foreground / 255)) * 255, 255);
397
+ }
398
+
399
+ //--------------------------------
400
+ // Hue
401
+ //--------------------------------
402
+ @function blend-hue ($foreground, $background) {
403
+ $foreground-hsv: color-to-hsv($foreground);
404
+ $background-hsv: color-to-hsv($background);
405
+
406
+ $bm-hsv: nth($foreground-hsv, 1), nth($background-hsv, 2), nth($background-hsv, 3);
407
+ $bm-color: hsv-to-color($bm-hsv);
408
+
409
+ @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
410
+ }
411
+
412
+ //--------------------------------
413
+ // Luminosity
414
+ //--------------------------------
415
+ @function blend-luminosity ($foreground, $background) {
416
+ $foreground-hsv: color-to-hsv($foreground);
417
+ $background-hsv: color-to-hsv($background);
418
+
419
+ $bm-hsv: nth($background-hsv, 1), nth($background-hsv, 2), nth($foreground-hsv, 3);
420
+ $bm-color: hsv-to-color($bm-hsv);
421
+
422
+ @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
423
+ }
424
+
425
+ //--------------------------------
426
+ // Saturation
427
+ //--------------------------------
428
+ @function blend-saturation ($foreground, $background) {
429
+ $foreground-hsv: color-to-hsv($foreground);
430
+ $background-hsv: color-to-hsv($background);
431
+
432
+ $bm-hsv: nth($background-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
433
+ $bm-color: hsv-to-color($bm-hsv);
434
+
435
+ @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
436
+ }
437
+
438
+ //--------------------------------
439
+ // Subtract
440
+ //--------------------------------
441
+ @function blend-subtract ($foreground, $background) {
442
+ $bm-red: max(red($background) - red($foreground), 0);
443
+ $bm-green: max(green($background) - green($foreground), 0);
444
+ $bm-blue: max(blue($background) - blue($foreground), 0);
445
+
446
+ @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
447
+ }
448
+
449
+ //--------------------------------
450
+ // HSL and HSV
451
+ //--------------------------------
452
+ // @see https://gist.github.com/1069204
453
+ @function hsv-to-hsl($h, $s: 0, $v: 0) {
454
+ @if type-of($h) == 'list' {
455
+ $v: nth($h, 3);
456
+ $s: nth($h, 2);
457
+ $h: nth($h, 1);
458
+ }
459
+
460
+ @if unit($h) == 'deg' {
461
+ $h: 3.1415 * 2 * ($h / 360deg);
462
+ }
463
+ @if unit($s) == '%' {
464
+ $s: 0 + ($s / 100%);
465
+ }
466
+ @if unit($v) == '%' {
467
+ $v: 0 + ($v / 100%);
468
+ }
469
+
470
+ $ss: $s * $v;
471
+ $ll: (2 - $s) * $v;
472
+
473
+ @if $ll <= 1 {
474
+ $ss: $ss / $ll;
475
+ } @else if ($ll == 2) {
476
+ $ss: 0;
477
+ } @else {
478
+ $ss: $ss / (2 - $ll);
479
+ }
480
+
481
+ $ll: $ll / 2;
482
+
483
+ @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $ss))), percentage(max(0, min(1, $ll)));
484
+ }
485
+
486
+ @function hsl-to-hsv($h, $ss: 0, $ll: 0) {
487
+ @if type-of($h) == 'list' {
488
+ $ll: nth($h, 3);
489
+ $ss: nth($h, 2);
490
+ $h: nth($h, 1);
491
+ } @else if type-of($h) == 'color' {
492
+ $ll: lightness($h);
493
+ $ss: saturation($h);
494
+ $h: hue($h);
495
+ }
496
+
497
+ @if unit($h) == 'deg' {
498
+ $h: 3.1415 * 2 * ($h / 360deg);
499
+ }
500
+ @if unit($ss) == '%' {
501
+ $ss: 0 + ($ss / 100%);
502
+ }
503
+ @if unit($ll) == '%' {
504
+ $ll: 0 + ($ll / 100%);
505
+ }
506
+
507
+ $ll: $ll * 2;
508
+
509
+ @if $ll <= 1 {
510
+ $ss: $ss * $ll;
511
+ } @else {
512
+ $ss: $ss * (2 - $ll);
513
+ }
514
+
515
+ $v: ($ll + $ss) / 2;
516
+ $s: (2 * $ss) / ($ll + $ss);
517
+
518
+ @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $s))), percentage(max(0, min(1, $v)));
519
+ }
520
+
521
+ @function color-to-hsv($color) {
522
+ @return hsl-to-hsv($color);
523
+ }
524
+
525
+ @function hsv-to-color($h, $s: 0, $v: 0) {
526
+ $hsl: hsv-to-hsl($h, $s, $v);
527
+ @return hsl(nth($hsl, 1), nth($hsl, 2), nth($hsl, 3));
528
+ }