2 /* eslint-disable no-mixed-operators */
3 const cssKeywords = require('color-name');
5 // NOTE: conversions should only return primitive values (i.e. arrays, or
6 // values that give correct `typeof` results).
7 // do not use box values types (i.e. Number(), String(), etc.)
9 const reverseKeywords = {};
10 for (const key of Object.keys(cssKeywords)) {
11 reverseKeywords[cssKeywords[key]] = key;
15 rgb: {channels: 3, labels: 'rgb'},
16 hsl: {channels: 3, labels: 'hsl'},
17 hsv: {channels: 3, labels: 'hsv'},
18 hwb: {channels: 3, labels: 'hwb'},
19 cmyk: {channels: 4, labels: 'cmyk'},
20 xyz: {channels: 3, labels: 'xyz'},
21 lab: {channels: 3, labels: 'lab'},
22 lch: {channels: 3, labels: 'lch'},
23 hex: {channels: 1, labels: ['hex']},
24 keyword: {channels: 1, labels: ['keyword']},
25 ansi16: {channels: 1, labels: ['ansi16']},
26 ansi256: {channels: 1, labels: ['ansi256']},
27 hcg: {channels: 3, labels: ['h', 'c', 'g']},
28 apple: {channels: 3, labels: ['r16', 'g16', 'b16']},
29 gray: {channels: 1, labels: ['gray']}
32 module.exports = convert;
34 // Hide .channels and .labels properties
35 for (const model of Object.keys(convert)) {
36 if (!('channels' in convert[model])) {
37 throw new Error('missing channels property: ' + model);
40 if (!('labels' in convert[model])) {
41 throw new Error('missing channel labels property: ' + model);
44 if (convert[model].labels.length !== convert[model].channels) {
45 throw new Error('channel and label counts mismatch: ' + model);
48 const {channels, labels} = convert[model];
49 delete convert[model].channels;
50 delete convert[model].labels;
51 Object.defineProperty(convert[model], 'channels', {value: channels});
52 Object.defineProperty(convert[model], 'labels', {value: labels});
55 convert.rgb.hsl = function (rgb) {
56 const r = rgb[0] / 255;
57 const g = rgb[1] / 255;
58 const b = rgb[2] / 255;
59 const min = Math.min(r, g, b);
60 const max = Math.max(r, g, b);
61 const delta = max - min;
67 } else if (r === max) {
69 } else if (g === max) {
70 h = 2 + (b - r) / delta;
71 } else if (b === max) {
72 h = 4 + (r - g) / delta;
75 h = Math.min(h * 60, 360);
81 const l = (min + max) / 2;
85 } else if (l <= 0.5) {
86 s = delta / (max + min);
88 s = delta / (2 - max - min);
91 return [h, s * 100, l * 100];
94 convert.rgb.hsv = function (rgb) {
101 const r = rgb[0] / 255;
102 const g = rgb[1] / 255;
103 const b = rgb[2] / 255;
104 const v = Math.max(r, g, b);
105 const diff = v - Math.min(r, g, b);
106 const diffc = function (c) {
107 return (v - c) / 6 / diff + 1 / 2;
121 } else if (g === v) {
122 h = (1 / 3) + rdif - bdif;
123 } else if (b === v) {
124 h = (2 / 3) + gdif - rdif;
141 convert.rgb.hwb = function (rgb) {
145 const h = convert.rgb.hsl(rgb)[0];
146 const w = 1 / 255 * Math.min(r, Math.min(g, b));
148 b = 1 - 1 / 255 * Math.max(r, Math.max(g, b));
150 return [h, w * 100, b * 100];
153 convert.rgb.cmyk = function (rgb) {
154 const r = rgb[0] / 255;
155 const g = rgb[1] / 255;
156 const b = rgb[2] / 255;
158 const k = Math.min(1 - r, 1 - g, 1 - b);
159 const c = (1 - r - k) / (1 - k) || 0;
160 const m = (1 - g - k) / (1 - k) || 0;
161 const y = (1 - b - k) / (1 - k) || 0;
163 return [c * 100, m * 100, y * 100, k * 100];
166 function comparativeDistance(x, y) {
168 See https://en.m.wikipedia.org/wiki/Euclidean_distance#Squared_Euclidean_distance
171 ((x[0] - y[0]) ** 2) +
172 ((x[1] - y[1]) ** 2) +
177 convert.rgb.keyword = function (rgb) {
178 const reversed = reverseKeywords[rgb];
183 let currentClosestDistance = Infinity;
184 let currentClosestKeyword;
186 for (const keyword of Object.keys(cssKeywords)) {
187 const value = cssKeywords[keyword];
189 // Compute comparative distance
190 const distance = comparativeDistance(rgb, value);
192 // Check if its less, if so set as closest
193 if (distance < currentClosestDistance) {
194 currentClosestDistance = distance;
195 currentClosestKeyword = keyword;
199 return currentClosestKeyword;
202 convert.keyword.rgb = function (keyword) {
203 return cssKeywords[keyword];
206 convert.rgb.xyz = function (rgb) {
207 let r = rgb[0] / 255;
208 let g = rgb[1] / 255;
209 let b = rgb[2] / 255;
212 r = r > 0.04045 ? (((r + 0.055) / 1.055) ** 2.4) : (r / 12.92);
213 g = g > 0.04045 ? (((g + 0.055) / 1.055) ** 2.4) : (g / 12.92);
214 b = b > 0.04045 ? (((b + 0.055) / 1.055) ** 2.4) : (b / 12.92);
216 const x = (r * 0.4124) + (g * 0.3576) + (b * 0.1805);
217 const y = (r * 0.2126) + (g * 0.7152) + (b * 0.0722);
218 const z = (r * 0.0193) + (g * 0.1192) + (b * 0.9505);
220 return [x * 100, y * 100, z * 100];
223 convert.rgb.lab = function (rgb) {
224 const xyz = convert.rgb.xyz(rgb);
233 x = x > 0.008856 ? (x ** (1 / 3)) : (7.787 * x) + (16 / 116);
234 y = y > 0.008856 ? (y ** (1 / 3)) : (7.787 * y) + (16 / 116);
235 z = z > 0.008856 ? (z ** (1 / 3)) : (7.787 * z) + (16 / 116);
237 const l = (116 * y) - 16;
238 const a = 500 * (x - y);
239 const b = 200 * (y - z);
244 convert.hsl.rgb = function (hsl) {
245 const h = hsl[0] / 360;
246 const s = hsl[1] / 100;
247 const l = hsl[2] / 100;
254 return [val, val, val];
263 const t1 = 2 * l - t2;
265 const rgb = [0, 0, 0];
266 for (let i = 0; i < 3; i++) {
267 t3 = h + 1 / 3 * -(i - 1);
277 val = t1 + (t2 - t1) * 6 * t3;
278 } else if (2 * t3 < 1) {
280 } else if (3 * t3 < 2) {
281 val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
292 convert.hsl.hsv = function (hsl) {
294 let s = hsl[1] / 100;
295 let l = hsl[2] / 100;
297 const lmin = Math.max(l, 0.01);
300 s *= (l <= 1) ? l : 2 - l;
301 smin *= lmin <= 1 ? lmin : 2 - lmin;
302 const v = (l + s) / 2;
303 const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
305 return [h, sv * 100, v * 100];
308 convert.hsv.rgb = function (hsv) {
309 const h = hsv[0] / 60;
310 const s = hsv[1] / 100;
311 let v = hsv[2] / 100;
312 const hi = Math.floor(h) % 6;
314 const f = h - Math.floor(h);
315 const p = 255 * v * (1 - s);
316 const q = 255 * v * (1 - (s * f));
317 const t = 255 * v * (1 - (s * (1 - f)));
336 convert.hsv.hsl = function (hsv) {
338 const s = hsv[1] / 100;
339 const v = hsv[2] / 100;
340 const vmin = Math.max(v, 0.01);
345 const lmin = (2 - s) * vmin;
347 sl /= (lmin <= 1) ? lmin : 2 - lmin;
351 return [h, sl * 100, l * 100];
354 // http://dev.w3.org/csswg/css-color/#hwb-to-rgb
355 convert.hwb.rgb = function (hwb) {
356 const h = hwb[0] / 360;
357 let wh = hwb[1] / 100;
358 let bl = hwb[2] / 100;
359 const ratio = wh + bl;
362 // Wh + bl cant be > 1
368 const i = Math.floor(6 * h);
372 if ((i & 0x01) !== 0) {
376 const n = wh + f * (v - wh); // Linear interpolation
381 /* eslint-disable max-statements-per-line,no-multi-spaces */
385 case 0: r = v; g = n; b = wh; break;
386 case 1: r = n; g = v; b = wh; break;
387 case 2: r = wh; g = v; b = n; break;
388 case 3: r = wh; g = n; b = v; break;
389 case 4: r = n; g = wh; b = v; break;
390 case 5: r = v; g = wh; b = n; break;
392 /* eslint-enable max-statements-per-line,no-multi-spaces */
394 return [r * 255, g * 255, b * 255];
397 convert.cmyk.rgb = function (cmyk) {
398 const c = cmyk[0] / 100;
399 const m = cmyk[1] / 100;
400 const y = cmyk[2] / 100;
401 const k = cmyk[3] / 100;
403 const r = 1 - Math.min(1, c * (1 - k) + k);
404 const g = 1 - Math.min(1, m * (1 - k) + k);
405 const b = 1 - Math.min(1, y * (1 - k) + k);
407 return [r * 255, g * 255, b * 255];
410 convert.xyz.rgb = function (xyz) {
411 const x = xyz[0] / 100;
412 const y = xyz[1] / 100;
413 const z = xyz[2] / 100;
418 r = (x * 3.2406) + (y * -1.5372) + (z * -0.4986);
419 g = (x * -0.9689) + (y * 1.8758) + (z * 0.0415);
420 b = (x * 0.0557) + (y * -0.2040) + (z * 1.0570);
424 ? ((1.055 * (r ** (1.0 / 2.4))) - 0.055)
428 ? ((1.055 * (g ** (1.0 / 2.4))) - 0.055)
432 ? ((1.055 * (b ** (1.0 / 2.4))) - 0.055)
435 r = Math.min(Math.max(0, r), 1);
436 g = Math.min(Math.max(0, g), 1);
437 b = Math.min(Math.max(0, b), 1);
439 return [r * 255, g * 255, b * 255];
442 convert.xyz.lab = function (xyz) {
451 x = x > 0.008856 ? (x ** (1 / 3)) : (7.787 * x) + (16 / 116);
452 y = y > 0.008856 ? (y ** (1 / 3)) : (7.787 * y) + (16 / 116);
453 z = z > 0.008856 ? (z ** (1 / 3)) : (7.787 * z) + (16 / 116);
455 const l = (116 * y) - 16;
456 const a = 500 * (x - y);
457 const b = 200 * (y - z);
462 convert.lab.xyz = function (lab) {
477 y = y2 > 0.008856 ? y2 : (y - 16 / 116) / 7.787;
478 x = x2 > 0.008856 ? x2 : (x - 16 / 116) / 7.787;
479 z = z2 > 0.008856 ? z2 : (z - 16 / 116) / 7.787;
488 convert.lab.lch = function (lab) {
494 const hr = Math.atan2(b, a);
495 h = hr * 360 / 2 / Math.PI;
501 const c = Math.sqrt(a * a + b * b);
506 convert.lch.lab = function (lch) {
511 const hr = h / 360 * 2 * Math.PI;
512 const a = c * Math.cos(hr);
513 const b = c * Math.sin(hr);
518 convert.rgb.ansi16 = function (args, saturation = null) {
519 const [r, g, b] = args;
520 let value = saturation === null ? convert.rgb.hsv(args)[2] : saturation; // Hsv -> ansi16 optimization
522 value = Math.round(value / 50);
529 + ((Math.round(b / 255) << 2)
530 | (Math.round(g / 255) << 1)
531 | Math.round(r / 255));
540 convert.hsv.ansi16 = function (args) {
541 // Optimization here; we already know the value and don't need to get
542 // it converted for us.
543 return convert.rgb.ansi16(convert.hsv.rgb(args), args[2]);
546 convert.rgb.ansi256 = function (args) {
551 // We use the extended greyscale palette here, with the exception of
552 // black and white. normal palette only has 4 greyscale shades.
553 if (r === g && g === b) {
562 return Math.round(((r - 8) / 247) * 24) + 232;
566 + (36 * Math.round(r / 255 * 5))
567 + (6 * Math.round(g / 255 * 5))
568 + Math.round(b / 255 * 5);
573 convert.ansi16.rgb = function (args) {
574 let color = args % 10;
577 if (color === 0 || color === 7) {
582 color = color / 10.5 * 255;
584 return [color, color, color];
587 const mult = (~~(args > 50) + 1) * 0.5;
588 const r = ((color & 1) * mult) * 255;
589 const g = (((color >> 1) & 1) * mult) * 255;
590 const b = (((color >> 2) & 1) * mult) * 255;
595 convert.ansi256.rgb = function (args) {
598 const c = (args - 232) * 10 + 8;
605 const r = Math.floor(args / 36) / 5 * 255;
606 const g = Math.floor((rem = args % 36) / 6) / 5 * 255;
607 const b = (rem % 6) / 5 * 255;
612 convert.rgb.hex = function (args) {
613 const integer = ((Math.round(args[0]) & 0xFF) << 16)
614 + ((Math.round(args[1]) & 0xFF) << 8)
615 + (Math.round(args[2]) & 0xFF);
617 const string = integer.toString(16).toUpperCase();
618 return '000000'.substring(string.length) + string;
621 convert.hex.rgb = function (args) {
622 const match = args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);
627 let colorString = match[0];
629 if (match[0].length === 3) {
630 colorString = colorString.split('').map(char => {
635 const integer = parseInt(colorString, 16);
636 const r = (integer >> 16) & 0xFF;
637 const g = (integer >> 8) & 0xFF;
638 const b = integer & 0xFF;
643 convert.rgb.hcg = function (rgb) {
644 const r = rgb[0] / 255;
645 const g = rgb[1] / 255;
646 const b = rgb[2] / 255;
647 const max = Math.max(Math.max(r, g), b);
648 const min = Math.min(Math.min(r, g), b);
649 const chroma = (max - min);
654 grayscale = min / (1 - chroma);
663 hue = ((g - b) / chroma) % 6;
666 hue = 2 + (b - r) / chroma;
668 hue = 4 + (r - g) / chroma;
674 return [hue * 360, chroma * 100, grayscale * 100];
677 convert.hsl.hcg = function (hsl) {
678 const s = hsl[1] / 100;
679 const l = hsl[2] / 100;
681 const c = l < 0.5 ? (2.0 * s * l) : (2.0 * s * (1.0 - l));
685 f = (l - 0.5 * c) / (1.0 - c);
688 return [hsl[0], c * 100, f * 100];
691 convert.hsv.hcg = function (hsv) {
692 const s = hsv[1] / 100;
693 const v = hsv[2] / 100;
699 f = (v - c) / (1 - c);
702 return [hsv[0], c * 100, f * 100];
705 convert.hcg.rgb = function (hcg) {
706 const h = hcg[0] / 360;
707 const c = hcg[1] / 100;
708 const g = hcg[2] / 100;
711 return [g * 255, g * 255, g * 255];
714 const pure = [0, 0, 0];
715 const hi = (h % 1) * 6;
720 /* eslint-disable max-statements-per-line */
721 switch (Math.floor(hi)) {
723 pure[0] = 1; pure[1] = v; pure[2] = 0; break;
725 pure[0] = w; pure[1] = 1; pure[2] = 0; break;
727 pure[0] = 0; pure[1] = 1; pure[2] = v; break;
729 pure[0] = 0; pure[1] = w; pure[2] = 1; break;
731 pure[0] = v; pure[1] = 0; pure[2] = 1; break;
733 pure[0] = 1; pure[1] = 0; pure[2] = w;
735 /* eslint-enable max-statements-per-line */
740 (c * pure[0] + mg) * 255,
741 (c * pure[1] + mg) * 255,
742 (c * pure[2] + mg) * 255
746 convert.hcg.hsv = function (hcg) {
747 const c = hcg[1] / 100;
748 const g = hcg[2] / 100;
750 const v = c + g * (1.0 - c);
757 return [hcg[0], f * 100, v * 100];
760 convert.hcg.hsl = function (hcg) {
761 const c = hcg[1] / 100;
762 const g = hcg[2] / 100;
764 const l = g * (1.0 - c) + 0.5 * c;
767 if (l > 0.0 && l < 0.5) {
770 if (l >= 0.5 && l < 1.0) {
771 s = c / (2 * (1 - l));
774 return [hcg[0], s * 100, l * 100];
777 convert.hcg.hwb = function (hcg) {
778 const c = hcg[1] / 100;
779 const g = hcg[2] / 100;
780 const v = c + g * (1.0 - c);
781 return [hcg[0], (v - c) * 100, (1 - v) * 100];
784 convert.hwb.hcg = function (hwb) {
785 const w = hwb[1] / 100;
786 const b = hwb[2] / 100;
792 g = (v - c) / (1 - c);
795 return [hwb[0], c * 100, g * 100];
798 convert.apple.rgb = function (apple) {
799 return [(apple[0] / 65535) * 255, (apple[1] / 65535) * 255, (apple[2] / 65535) * 255];
802 convert.rgb.apple = function (rgb) {
803 return [(rgb[0] / 255) * 65535, (rgb[1] / 255) * 65535, (rgb[2] / 255) * 65535];
806 convert.gray.rgb = function (args) {
807 return [args[0] / 100 * 255, args[0] / 100 * 255, args[0] / 100 * 255];
810 convert.gray.hsl = function (args) {
811 return [0, 0, args[0]];
814 convert.gray.hsv = convert.gray.hsl;
816 convert.gray.hwb = function (gray) {
817 return [0, 100, gray[0]];
820 convert.gray.cmyk = function (gray) {
821 return [0, 0, 0, gray[0]];
824 convert.gray.lab = function (gray) {
825 return [gray[0], 0, 0];
828 convert.gray.hex = function (gray) {
829 const val = Math.round(gray[0] / 100 * 255) & 0xFF;
830 const integer = (val << 16) + (val << 8) + val;
832 const string = integer.toString(16).toUpperCase();
833 return '000000'.substring(string.length) + string;
836 convert.rgb.gray = function (rgb) {
837 const val = (rgb[0] + rgb[1] + rgb[2]) / 3;
838 return [val / 255 * 100];