UNPKG

15.1 kBJavaScriptView Raw
1/* MIT license */
2var cssKeywords = require('./css-keywords');
3
4// NOTE: conversions should only return primitive values (i.e. arrays, or
5// values that give correct `typeof` results).
6// do not use box values types (i.e. Number(), String(), etc.)
7
8var reverseKeywords = {};
9for (var key in cssKeywords) {
10 if (cssKeywords.hasOwnProperty(key)) {
11 reverseKeywords[cssKeywords[key]] = key;
12 }
13}
14
15var convert = module.exports = {
16 rgb: {channels: 3},
17 hsl: {channels: 3},
18 hsv: {channels: 3},
19 hwb: {channels: 3},
20 cmyk: {channels: 4},
21 xyz: {channels: 3},
22 lab: {channels: 3},
23 lch: {channels: 3},
24 hex: {channels: 1},
25 keyword: {channels: 1},
26 ansi16: {channels: 1},
27 ansi256: {channels: 1},
28 hcg: {channels: 3},
29 apple: {channels: 3}
30};
31
32// hide .channels property
33for (var model in convert) {
34 if (convert.hasOwnProperty(model)) {
35 if (!('channels' in convert[model])) {
36 throw new Error('missing channels property: ' + model);
37 }
38
39 var channels = convert[model].channels;
40 delete convert[model].channels;
41 Object.defineProperty(convert[model], 'channels', {value: channels});
42 }
43}
44
45convert.rgb.hsl = function (rgb) {
46 var r = rgb[0] / 255;
47 var g = rgb[1] / 255;
48 var b = rgb[2] / 255;
49 var min = Math.min(r, g, b);
50 var max = Math.max(r, g, b);
51 var delta = max - min;
52 var h;
53 var s;
54 var l;
55
56 if (max === min) {
57 h = 0;
58 } else if (r === max) {
59 h = (g - b) / delta;
60 } else if (g === max) {
61 h = 2 + (b - r) / delta;
62 } else if (b === max) {
63 h = 4 + (r - g) / delta;
64 }
65
66 h = Math.min(h * 60, 360);
67
68 if (h < 0) {
69 h += 360;
70 }
71
72 l = (min + max) / 2;
73
74 if (max === min) {
75 s = 0;
76 } else if (l <= 0.5) {
77 s = delta / (max + min);
78 } else {
79 s = delta / (2 - max - min);
80 }
81
82 return [h, s * 100, l * 100];
83};
84
85convert.rgb.hsv = function (rgb) {
86 var r = rgb[0];
87 var g = rgb[1];
88 var b = rgb[2];
89 var min = Math.min(r, g, b);
90 var max = Math.max(r, g, b);
91 var delta = max - min;
92 var h;
93 var s;
94 var v;
95
96 if (max === 0) {
97 s = 0;
98 } else {
99 s = (delta / max * 1000) / 10;
100 }
101
102 if (max === min) {
103 h = 0;
104 } else if (r === max) {
105 h = (g - b) / delta;
106 } else if (g === max) {
107 h = 2 + (b - r) / delta;
108 } else if (b === max) {
109 h = 4 + (r - g) / delta;
110 }
111
112 h = Math.min(h * 60, 360);
113
114 if (h < 0) {
115 h += 360;
116 }
117
118 v = ((max / 255) * 1000) / 10;
119
120 return [h, s, v];
121};
122
123convert.rgb.hwb = function (rgb) {
124 var r = rgb[0];
125 var g = rgb[1];
126 var b = rgb[2];
127 var h = convert.rgb.hsl(rgb)[0];
128 var w = 1 / 255 * Math.min(r, Math.min(g, b));
129
130 b = 1 - 1 / 255 * Math.max(r, Math.max(g, b));
131
132 return [h, w * 100, b * 100];
133};
134
135convert.rgb.cmyk = function (rgb) {
136 var r = rgb[0] / 255;
137 var g = rgb[1] / 255;
138 var b = rgb[2] / 255;
139 var c;
140 var m;
141 var y;
142 var k;
143
144 k = Math.min(1 - r, 1 - g, 1 - b);
145 c = (1 - r - k) / (1 - k) || 0;
146 m = (1 - g - k) / (1 - k) || 0;
147 y = (1 - b - k) / (1 - k) || 0;
148
149 return [c * 100, m * 100, y * 100, k * 100];
150};
151
152/**
153 * See https://en.m.wikipedia.org/wiki/Euclidean_distance#Squared_Euclidean_distance
154 * */
155function comparativeDistance(x, y) {
156 return (
157 Math.pow(x[0] - y[0], 2) +
158 Math.pow(x[1] - y[1], 2) +
159 Math.pow(x[2] - y[2], 2)
160 );
161}
162
163convert.rgb.keyword = function (rgb) {
164 var reversed = reverseKeywords[rgb];
165 if (reversed) {
166 return reversed;
167 }
168
169 var currentClosestDistance = Infinity;
170 var currentClosestKeyword;
171
172 for (var keyword in cssKeywords) {
173 if (cssKeywords.hasOwnProperty(keyword)) {
174 var value = cssKeywords[keyword];
175
176 // Compute comparative distance
177 var distance = comparativeDistance(rgb, value);
178
179 // Check if its less, if so set as closest
180 if (distance < currentClosestDistance) {
181 currentClosestDistance = distance;
182 currentClosestKeyword = keyword;
183 }
184 }
185 }
186
187 return currentClosestKeyword;
188};
189
190convert.keyword.rgb = function (keyword) {
191 return cssKeywords[keyword];
192};
193
194convert.rgb.xyz = function (rgb) {
195 var r = rgb[0] / 255;
196 var g = rgb[1] / 255;
197 var b = rgb[2] / 255;
198
199 // assume sRGB
200 r = r > 0.04045 ? Math.pow(((r + 0.055) / 1.055), 2.4) : (r / 12.92);
201 g = g > 0.04045 ? Math.pow(((g + 0.055) / 1.055), 2.4) : (g / 12.92);
202 b = b > 0.04045 ? Math.pow(((b + 0.055) / 1.055), 2.4) : (b / 12.92);
203
204 var x = (r * 0.4124) + (g * 0.3576) + (b * 0.1805);
205 var y = (r * 0.2126) + (g * 0.7152) + (b * 0.0722);
206 var z = (r * 0.0193) + (g * 0.1192) + (b * 0.9505);
207
208 return [x * 100, y * 100, z * 100];
209};
210
211convert.rgb.lab = function (rgb) {
212 var xyz = convert.rgb.xyz(rgb);
213 var x = xyz[0];
214 var y = xyz[1];
215 var z = xyz[2];
216 var l;
217 var a;
218 var b;
219
220 x /= 95.047;
221 y /= 100;
222 z /= 108.883;
223
224 x = x > 0.008856 ? Math.pow(x, 1 / 3) : (7.787 * x) + (16 / 116);
225 y = y > 0.008856 ? Math.pow(y, 1 / 3) : (7.787 * y) + (16 / 116);
226 z = z > 0.008856 ? Math.pow(z, 1 / 3) : (7.787 * z) + (16 / 116);
227
228 l = (116 * y) - 16;
229 a = 500 * (x - y);
230 b = 200 * (y - z);
231
232 return [l, a, b];
233};
234
235convert.hsl.rgb = function (hsl) {
236 var h = hsl[0] / 360;
237 var s = hsl[1] / 100;
238 var l = hsl[2] / 100;
239 var t1;
240 var t2;
241 var t3;
242 var rgb;
243 var val;
244
245 if (s === 0) {
246 val = l * 255;
247 return [val, val, val];
248 }
249
250 if (l < 0.5) {
251 t2 = l * (1 + s);
252 } else {
253 t2 = l + s - l * s;
254 }
255
256 t1 = 2 * l - t2;
257
258 rgb = [0, 0, 0];
259 for (var i = 0; i < 3; i++) {
260 t3 = h + 1 / 3 * -(i - 1);
261 if (t3 < 0) {
262 t3++;
263 }
264 if (t3 > 1) {
265 t3--;
266 }
267
268 if (6 * t3 < 1) {
269 val = t1 + (t2 - t1) * 6 * t3;
270 } else if (2 * t3 < 1) {
271 val = t2;
272 } else if (3 * t3 < 2) {
273 val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
274 } else {
275 val = t1;
276 }
277
278 rgb[i] = val * 255;
279 }
280
281 return rgb;
282};
283
284convert.hsl.hsv = function (hsl) {
285 var h = hsl[0];
286 var s = hsl[1] / 100;
287 var l = hsl[2] / 100;
288 var smin = s;
289 var lmin = Math.max(l, 0.01);
290 var sv;
291 var v;
292
293 l *= 2;
294 s *= (l <= 1) ? l : 2 - l;
295 smin *= lmin <= 1 ? lmin : 2 - lmin;
296 v = (l + s) / 2;
297 sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
298
299 return [h, sv * 100, v * 100];
300};
301
302convert.hsv.rgb = function (hsv) {
303 var h = hsv[0] / 60;
304 var s = hsv[1] / 100;
305 var v = hsv[2] / 100;
306 var hi = Math.floor(h) % 6;
307
308 var f = h - Math.floor(h);
309 var p = 255 * v * (1 - s);
310 var q = 255 * v * (1 - (s * f));
311 var t = 255 * v * (1 - (s * (1 - f)));
312 v *= 255;
313
314 switch (hi) {
315 case 0:
316 return [v, t, p];
317 case 1:
318 return [q, v, p];
319 case 2:
320 return [p, v, t];
321 case 3:
322 return [p, q, v];
323 case 4:
324 return [t, p, v];
325 case 5:
326 return [v, p, q];
327 }
328};
329
330convert.hsv.hsl = function (hsv) {
331 var h = hsv[0];
332 var s = hsv[1] / 100;
333 var v = hsv[2] / 100;
334 var vmin = Math.max(v, 0.01);
335 var lmin;
336 var sl;
337 var l;
338
339 l = (2 - s) * v;
340 lmin = (2 - s) * vmin;
341 sl = s * vmin;
342 sl /= (lmin <= 1) ? lmin : 2 - lmin;
343 sl = sl || 0;
344 l /= 2;
345
346 return [h, sl * 100, l * 100];
347};
348
349// http://dev.w3.org/csswg/css-color/#hwb-to-rgb
350convert.hwb.rgb = function (hwb) {
351 var h = hwb[0] / 360;
352 var wh = hwb[1] / 100;
353 var bl = hwb[2] / 100;
354 var ratio = wh + bl;
355 var i;
356 var v;
357 var f;
358 var n;
359
360 // wh + bl cant be > 1
361 if (ratio > 1) {
362 wh /= ratio;
363 bl /= ratio;
364 }
365
366 i = Math.floor(6 * h);
367 v = 1 - bl;
368 f = 6 * h - i;
369
370 if ((i & 0x01) !== 0) {
371 f = 1 - f;
372 }
373
374 n = wh + f * (v - wh); // linear interpolation
375
376 var r;
377 var g;
378 var b;
379 switch (i) {
380 default:
381 case 6:
382 case 0: r = v; g = n; b = wh; break;
383 case 1: r = n; g = v; b = wh; break;
384 case 2: r = wh; g = v; b = n; break;
385 case 3: r = wh; g = n; b = v; break;
386 case 4: r = n; g = wh; b = v; break;
387 case 5: r = v; g = wh; b = n; break;
388 }
389
390 return [r * 255, g * 255, b * 255];
391};
392
393convert.cmyk.rgb = function (cmyk) {
394 var c = cmyk[0] / 100;
395 var m = cmyk[1] / 100;
396 var y = cmyk[2] / 100;
397 var k = cmyk[3] / 100;
398 var r;
399 var g;
400 var b;
401
402 r = 1 - Math.min(1, c * (1 - k) + k);
403 g = 1 - Math.min(1, m * (1 - k) + k);
404 b = 1 - Math.min(1, y * (1 - k) + k);
405
406 return [r * 255, g * 255, b * 255];
407};
408
409convert.xyz.rgb = function (xyz) {
410 var x = xyz[0] / 100;
411 var y = xyz[1] / 100;
412 var z = xyz[2] / 100;
413 var r;
414 var g;
415 var b;
416
417 r = (x * 3.2406) + (y * -1.5372) + (z * -0.4986);
418 g = (x * -0.9689) + (y * 1.8758) + (z * 0.0415);
419 b = (x * 0.0557) + (y * -0.2040) + (z * 1.0570);
420
421 // assume sRGB
422 r = r > 0.0031308
423 ? ((1.055 * Math.pow(r, 1.0 / 2.4)) - 0.055)
424 : r * 12.92;
425
426 g = g > 0.0031308
427 ? ((1.055 * Math.pow(g, 1.0 / 2.4)) - 0.055)
428 : g * 12.92;
429
430 b = b > 0.0031308
431 ? ((1.055 * Math.pow(b, 1.0 / 2.4)) - 0.055)
432 : b * 12.92;
433
434 r = Math.min(Math.max(0, r), 1);
435 g = Math.min(Math.max(0, g), 1);
436 b = Math.min(Math.max(0, b), 1);
437
438 return [r * 255, g * 255, b * 255];
439};
440
441convert.xyz.lab = function (xyz) {
442 var x = xyz[0];
443 var y = xyz[1];
444 var z = xyz[2];
445 var l;
446 var a;
447 var b;
448
449 x /= 95.047;
450 y /= 100;
451 z /= 108.883;
452
453 x = x > 0.008856 ? Math.pow(x, 1 / 3) : (7.787 * x) + (16 / 116);
454 y = y > 0.008856 ? Math.pow(y, 1 / 3) : (7.787 * y) + (16 / 116);
455 z = z > 0.008856 ? Math.pow(z, 1 / 3) : (7.787 * z) + (16 / 116);
456
457 l = (116 * y) - 16;
458 a = 500 * (x - y);
459 b = 200 * (y - z);
460
461 return [l, a, b];
462};
463
464convert.lab.xyz = function (lab) {
465 var l = lab[0];
466 var a = lab[1];
467 var b = lab[2];
468 var x;
469 var y;
470 var z;
471
472 y = (l + 16) / 116;
473 x = a / 500 + y;
474 z = y - b / 200;
475
476 var y2 = Math.pow(y, 3);
477 var x2 = Math.pow(x, 3);
478 var z2 = Math.pow(z, 3);
479 y = y2 > 0.008856 ? y2 : (y - 16 / 116) / 7.787;
480 x = x2 > 0.008856 ? x2 : (x - 16 / 116) / 7.787;
481 z = z2 > 0.008856 ? z2 : (z - 16 / 116) / 7.787;
482
483 x *= 95.047;
484 y *= 100;
485 z *= 108.883;
486
487 return [x, y, z];
488};
489
490convert.lab.lch = function (lab) {
491 var l = lab[0];
492 var a = lab[1];
493 var b = lab[2];
494 var hr;
495 var h;
496 var c;
497
498 hr = Math.atan2(b, a);
499 h = hr * 360 / 2 / Math.PI;
500
501 if (h < 0) {
502 h += 360;
503 }
504
505 c = Math.sqrt(a * a + b * b);
506
507 return [l, c, h];
508};
509
510convert.lch.lab = function (lch) {
511 var l = lch[0];
512 var c = lch[1];
513 var h = lch[2];
514 var a;
515 var b;
516 var hr;
517
518 hr = h / 360 * 2 * Math.PI;
519 a = c * Math.cos(hr);
520 b = c * Math.sin(hr);
521
522 return [l, a, b];
523};
524
525convert.rgb.ansi16 = function (args) {
526 var r = args[0];
527 var g = args[1];
528 var b = args[2];
529 var value = 1 in arguments ? arguments[1] : convert.rgb.hsv(args)[2]; // hsv -> ansi16 optimization
530
531 value = Math.round(value / 50);
532
533 if (value === 0) {
534 return 30;
535 }
536
537 var ansi = 30
538 + ((Math.round(b / 255) << 2)
539 | (Math.round(g / 255) << 1)
540 | Math.round(r / 255));
541
542 if (value === 2) {
543 ansi += 60;
544 }
545
546 return ansi;
547};
548
549convert.hsv.ansi16 = function (args) {
550 // optimization here; we already know the value and don't need to get
551 // it converted for us.
552 return convert.rgb.ansi16(convert.hsv.rgb(args), args[2]);
553};
554
555convert.rgb.ansi256 = function (args) {
556 var r = args[0];
557 var g = args[1];
558 var b = args[2];
559
560 // we use the extended greyscale palette here, with the exception of
561 // black and white. normal palette only has 4 greyscale shades.
562 if (r === g && g === b) {
563 if (r < 8) {
564 return 16;
565 }
566
567 if (r > 248) {
568 return 231;
569 }
570
571 return Math.round(((r - 8) / 247) * 24) + 232;
572 }
573
574 var ansi = 16
575 + (36 * Math.round(r / 255 * 5))
576 + (6 * Math.round(g / 255 * 5))
577 + Math.round(b / 255 * 5);
578
579 return ansi;
580};
581
582convert.ansi16.rgb = function (args) {
583 var color = args % 10;
584
585 // handle greyscale
586 if (color === 0 || color === 7) {
587 if (args > 50) {
588 color += 3.5;
589 }
590
591 color = color / 10.5 * 255;
592
593 return [color, color, color];
594 }
595
596 var mult = (~~(args > 50) + 1) * 0.5;
597 var r = ((color & 1) * mult) * 255;
598 var g = (((color >> 1) & 1) * mult) * 255;
599 var b = (((color >> 2) & 1) * mult) * 255;
600
601 return [r, g, b];
602};
603
604convert.ansi256.rgb = function (args) {
605 // handle greyscale
606 if (args >= 232) {
607 var c = (args - 232) * 10 + 8;
608 return [c, c, c];
609 }
610
611 args -= 16;
612
613 var rem;
614 var r = Math.floor(args / 36) / 5 * 255;
615 var g = Math.floor((rem = args % 36) / 6) / 5 * 255;
616 var b = (rem % 6) / 5 * 255;
617
618 return [r, g, b];
619};
620
621convert.rgb.hex = function (args) {
622 var integer = ((Math.round(args[0]) & 0xFF) << 16)
623 + ((Math.round(args[1]) & 0xFF) << 8)
624 + (Math.round(args[2]) & 0xFF);
625
626 var string = integer.toString(16).toUpperCase();
627 return '000000'.substring(string.length) + string;
628};
629
630convert.hex.rgb = function (args) {
631 var match = args.toString(16).match(/[a-f0-9]{6}/i);
632 if (!match) {
633 return [0, 0, 0];
634 }
635
636 var integer = parseInt(match[0], 16);
637 var r = (integer >> 16) & 0xFF;
638 var g = (integer >> 8) & 0xFF;
639 var b = integer & 0xFF;
640
641 return [r, g, b];
642};
643
644convert.rgb.hcg = function (rgb) {
645 var r = rgb[0] / 255;
646 var g = rgb[1] / 255;
647 var b = rgb[2] / 255;
648 var max = Math.max(Math.max(r, g), b);
649 var min = Math.min(Math.min(r, g), b);
650 var chroma = (max - min);
651 var grayscale;
652 var hue;
653
654 if (chroma < 1) {
655 grayscale = min / (1 - chroma);
656 } else {
657 grayscale = 0;
658 }
659
660 if (chroma <= 0) {
661 hue = 0;
662 } else
663 if (max === r) {
664 hue = ((g - b) / chroma) % 6;
665 } else
666 if (max === g) {
667 hue = 2 + (b - r) / chroma;
668 } else {
669 hue = 4 + (r - g) / chroma + 4;
670 }
671
672 hue /= 6;
673 hue %= 1;
674
675 return [hue * 360, chroma * 100, grayscale * 100];
676};
677
678convert.hsl.hcg = function (hsl) {
679 var s = hsl[1] / 100;
680 var l = hsl[2] / 100;
681 var c = 1;
682 var f = 0;
683
684 if (l < 0.5) {
685 c = 2.0 * s * l;
686 } else {
687 c = 2.0 * s * (1.0 - l);
688 }
689
690 if (c < 1.0) {
691 f = (l - 0.5 * c) / (1.0 - c);
692 }
693
694 return [hsl[0], c * 100, f * 100];
695};
696
697convert.hsv.hcg = function (hsv) {
698 var s = hsv[1] / 100;
699 var v = hsv[2] / 100;
700
701 var c = s * v;
702 var f = 0;
703
704 if (c < 1.0) {
705 f = (v - c) / (1 - c);
706 }
707
708 return [hsv[0], c * 100, f * 100];
709};
710
711convert.hcg.rgb = function (hcg) {
712 var h = hcg[0] / 360;
713 var c = hcg[1] / 100;
714 var g = hcg[2] / 100;
715
716 if (c === 0.0) {
717 return [g * 255, g * 255, g * 255];
718 }
719
720 var pure = [0, 0, 0];
721 var hi = (h % 1) * 6;
722 var v = hi % 1;
723 var w = 1 - v;
724 var mg = 0;
725
726 switch (Math.floor(hi)) {
727 case 0:
728 pure[0] = 1; pure[1] = v; pure[2] = 0; break;
729 case 1:
730 pure[0] = w; pure[1] = 1; pure[2] = 0; break;
731 case 2:
732 pure[0] = 0; pure[1] = 1; pure[2] = v; break;
733 case 3:
734 pure[0] = 0; pure[1] = w; pure[2] = 1; break;
735 case 4:
736 pure[0] = v; pure[1] = 0; pure[2] = 1; break;
737 default:
738 pure[0] = 1; pure[1] = 0; pure[2] = w;
739 }
740
741 mg = (1.0 - c) * g;
742
743 return [
744 (c * pure[0] + mg) * 255,
745 (c * pure[1] + mg) * 255,
746 (c * pure[2] + mg) * 255
747 ];
748};
749
750convert.hcg.hsv = function (hcg) {
751 var c = hcg[1] / 100;
752 var g = hcg[2] / 100;
753
754 var v = c + g * (1.0 - c);
755 var f = 0;
756
757 if (v > 0.0) {
758 f = c / v;
759 }
760
761 return [hcg[0], f * 100, v * 100];
762};
763
764convert.hcg.hsl = function (hcg) {
765 var c = hcg[1] / 100;
766 var g = hcg[2] / 100;
767
768 var l = g * (1.0 - c) + 0.5 * c;
769 var s = 0;
770
771 if (l > 0.0 && l < 0.5) {
772 s = c / (2 * l);
773 } else
774 if (l >= 0.5 && l < 1.0) {
775 s = c / (2 * (1 - l));
776 }
777
778 return [hcg[0], s * 100, l * 100];
779};
780
781convert.hcg.hwb = function (hcg) {
782 var c = hcg[1] / 100;
783 var g = hcg[2] / 100;
784 var v = c + g * (1.0 - c);
785 return [hcg[0], (v - c) * 100, (1 - v) * 100];
786};
787
788convert.hwb.hcg = function (hwb) {
789 var w = hwb[1] / 100;
790 var b = hwb[2] / 100;
791 var v = 1 - b;
792 var c = v - w;
793 var g = 0;
794
795 if (c < 1) {
796 g = (v - c) / (1 - c);
797 }
798
799 return [hwb[0], c * 100, g * 100];
800};
801
802convert.apple.rgb = function (apple) {
803 return [(apple[0] / 65535) * 255, (apple[1] / 65535) * 255, (apple[2] / 65535) * 255];
804};
805
806convert.rgb.apple = function (rgb) {
807 return [(rgb[0] / 255) * 65535, (rgb[1] / 255) * 65535, (rgb[2] / 255) * 65535];
808};