colors

1interface hsl {
2  h: number;
3  s: number;
4  l: number;
5}
6 
7interface hex {
8  hex: string;
9}
10 
11type Color = hsl & hex;
12 
13const sanitizeHex = (val: string) => {
14  const sanitized = val.replace(/[^a-fA-F0-9]/g, "").toUpperCase();
15 
16  if (![3, 6, 8].includes(sanitized.length)) {
17    return undefined;
18  }
19 
20  return `#${sanitized}`;
21};
22 
23const hslToHex = ({ h, s, l }: hsl) => {
24  s /= 100;
25  l /= 100;
26 
27  const k = (n: number) => (n + h / 30) % 12;
28  const a = s * Math.min(l, 1 - l);
29  const f = (n: number) =>
30    l - a * Math.max(Math.min(k(n) - 3, 9 - k(n), 1), -1);
31  const r = Math.round(255 * f(0));
32  const g = Math.round(255 * f(8));
33  const b = Math.round(255 * f(4));
34 
35  const toHex = (x: number) => {
36    const hex = x.toString(16);
37    return hex.length === 1 ? `0${hex}` : hex;
38  };
39 
40  return `${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
41};
42 
43const hexToHsl = ({ hex }: hex): hsl => {
44  hex = hex.replace(/^#/, "");
45 
46  if (hex.length === 3) {
47    hex = hex
48      .split("")
49      .map((char) => char + char)
50      .join("");
51  }
52 
53  while (hex.length < 6) {
54    hex += "0";
55  }
56 
57  let r = Number.parseInt(hex.slice(0, 2), 16) || 0;
58  let g = Number.parseInt(hex.slice(2, 4), 16) || 0;
59  let b = Number.parseInt(hex.slice(4, 6), 16) || 0;
60 
61  r /= 255;
62  g /= 255;
63  b /= 255;
64  const max = Math.max(r, g, b);
65  const min = Math.min(r, g, b);
66  let h = 0;
67  let s: number;
68  const l = (max + min) / 2;
69 
70  if (max === min) {
71    h = s = 0;
72  } else {
73    const d = max - min;
74    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
75    switch (max) {
76      case r:
77        h = (g - b) / d + (g < b ? 6 : 0);
78        break;
79      case g:
80        h = (b - r) / d + 2;
81        break;
82      case b:
83        h = (r - g) / d + 4;
84        break;
85    }
86    h /= 6;
87    h *= 360;
88  }
89 
90  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
91};
92 
93export { type hsl, type hex, type Color, sanitizeHex, hslToHex, hexToHsl };