code to convert rgb to hsl color

1// see: https://en.wikipedia.org/wiki/RGB_color_model
2// see: https://en.wikipedia.org/wiki/HSL_and_HSV
3
4// expects R, G, B, Cmax and chroma to be in number interval [0, 1]
5// returns undefined if chroma is 0, or a number interval [0, 360] degrees
6function hue(R, G, B, Cmax, chroma) {
7  let H;
8  if (chroma === 0) {
9    return H;
10  }
11  if (Cmax === R) {
12    H = ((G - B) / chroma) % 6;
13  } else if (Cmax === G) {
14    H = ((B - R) / chroma) + 2;
15  } else if (Cmax === B) {
16    H = ((R - G) / chroma) + 4;
17  }
18  H *= 60;
19  return H < 0 ? H + 360 : H;
20}
21
22// returns the average of the supplied number arguments
23function average(...theArgs) {
24  return theArgs.length ? theArgs.reduce((p, c) => p + c, 0) / theArgs.length : 0;
25}
26
27// expects R, G, B, Cmin, Cmax and chroma to be in number interval [0, 1]
28// type is by default 'bi-hexcone' equation
29// set 'luma601' or 'luma709' for alternatives
30// see: https://en.wikipedia.org/wiki/Luma_(video)
31// returns a number interval [0, 1]
32function lightness(R, G, B, Cmin, Cmax, type = 'bi-hexcone') {
33  if (type === 'luma601') {
34    return (0.299 * R) + (0.587 * G) + (0.114 * B);
35  }
36  if (type === 'luma709') {
37    return (0.2126 * R) + (0.7152 * G) + (0.0772 * B);
38  }
39  return average(Cmin, Cmax);
40}
41
42// expects L and chroma to be in number interval [0, 1]
43// returns a number interval [0, 1]
44function saturation(L, chroma) {
45  return chroma === 0 ? 0 : chroma / (1 - Math.abs(2 * L - 1));
46}
47
48// returns the value to a fixed number of digits
49function toFixed(value, digits) {
50  return Number.isFinite(value) && Number.isFinite(digits) ? value.toFixed(digits) : value;
51}
52
53// expects R, G, and B to be in number interval [0, 1]
54// returns a Map of H, S and L in the appropriate interval and digits
55function RGB2HSL(R, G, B, fixed = true) {
56  const Cmin = Math.min(R, G, B);
57  const Cmax = Math.max(R, G, B);
58  const chroma = Cmax - Cmin;
59  // default 'bi-hexcone' equation
60  const L = lightness(R, G, B, Cmin, Cmax);
61  // H in degrees interval [0, 360]
62  // L and S in interval [0, 1]
63  return new Map([
64    ['H', toFixed(hue(R, G, B, Cmax, chroma), fixed && 1)],
65    ['S', toFixed(saturation(L, chroma), fixed && 3)],
66    ['L', toFixed(L, fixed && 3)]
67  ]);
68}
69
70// expects value to be number in interval [0, 255]
71// returns normalised value as a number interval [0, 1]
72function colourRange(value) {
73  return value / 255;
74};
75
76// expects R, G, and B to be in number interval [0, 255]
77function RGBdec2HSL(R, G, B) {
78  return RGB2HSL(colourRange(R), colourRange(G), colourRange(B));
79}
80
81// converts a hexidecimal string into a decimal number
82function hex2dec(value) {
83  return parseInt(value, 16);
84}
85
86// slices a string into an array of paired characters
87function pairSlicer(value) {
88  return value.match(/../g);
89}
90
91// prepend '0's to the start of a string and make specific length
92function prePad(value, count) {
93  return ('0'.repeat(count) + value).slice(-count);
94}
95
96// format hex pair string from value
97function hexPair(value) {
98  return hex2dec(prePad(value, 2));
99}
100
101// expects R, G, and B to be hex string in interval ['00', 'FF']
102// without a leading '#' character
103function RGBhex2HSL(R, G, B) {
104  return RGBdec2HSL(hexPair(R), hexPair(G), hexPair(B));
105}
106
107// expects RGB to be a hex string in interval ['000000', 'FFFFFF']
108// with or without a leading '#' character
109function RGBstr2HSL(RGB) {
110  const hex = prePad(RGB.charAt(0) === '#' ? RGB.slice(1) : RGB, 6);
111  return RGBhex2HSL(...pairSlicer(hex).slice(0, 3));
112}
113
114// expects value to be a Map object
115function logIt(value) {
116  console.log(value);
117  document.getElementById('out').textContent += JSON.stringify([...value]) + '\n';
118};
119
120logIt(RGBstr2HSL('000000'));
121logIt(RGBstr2HSL('#808080'));
122logIt(RGB2HSL(0, 0, 0));
123logIt(RGB2HSL(1, 1, 1));
124logIt(RGBdec2HSL(0, 0, 0));
125logIt(RGBdec2HSL(255, 255, 254));
126logIt(RGBhex2HSL('BF', 'BF', '00'));
127logIt(RGBstr2HSL('008000'));
128logIt(RGBstr2HSL('80FFFF'));
129logIt(RGBstr2HSL('8080FF'));
130logIt(RGBstr2HSL('BF40BF'));
131logIt(RGBstr2HSL('A0A424'));
132logIt(RGBstr2HSL('411BEA'));
133logIt(RGBstr2HSL('1EAC41'));
134logIt(RGBstr2HSL('F0C80E'));
135logIt(RGBstr2HSL('B430E5'));
136logIt(RGBstr2HSL('ED7651'));
137logIt(RGBstr2HSL('FEF888'));
138logIt(RGBstr2HSL('19CB97'));
139logIt(RGBstr2HSL('362698'));
140logIt(RGBstr2HSL('7E7EB8'));