« get me outta code hell

colors.js « util « src - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/util/colors.js
blob: a0cc7486d207dee7c08791ff61f4baa0b5868012 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// Color and theming utility functions! Handy.

// Graciously stolen from https://stackoverflow.com/a/54071699! ::::)
// in: r,g,b in [0,1], out: h in [0,360) and s,l in [0,1]
export function rgb2hsl(r, g, b) {
  let a = Math.max(r, g, b),
      n = a - Math.min(r, g, b),
      f = 1 - Math.abs(a + a - n - 1);

  let h =
    n &&
      a == r
        ? (g - b) / n
        : a == g
          ? 2 + (b - r) / n
          : 4 + (r - g) / n;

  return [
    60 * (h < 0 ? h + 6 : h),
    f ? n / f : 0,
    (a + a - n) / 2
  ];
}

export function getColors(primary) {
  const [r, g, b] = primary
    .slice(1)
    .match(/[0-9a-fA-F]{2,2}/g)
    .slice(0, 3)
    .map((val) => parseInt(val, 16) / 255);

  const [h, s, l] = rgb2hsl(r, g, b);

  const dim = `hsl(${Math.round(h)}deg, ${Math.round(s * 50)}%, ${Math.round(l * 80)}%)`;
  const bg = `hsla(${Math.round(h)}deg, ${Math.round(s * 15)}%, 12%, 0.80)`;

  return {
    primary,
    dim,
    bg,
    rgb: [r, g, b],
    hsl: [h, s, l],
  };
}