drawing-board-service/src/utils/colors.ts

import { Color, HSL } from "three";

const offset = {
  hover: {
    h: -0.012,
    s: 0,
    l: 0.07,
  },
  press: {
    h: 0.002,
    s: 0.104,
    l: 0.207,
  },
  disable: {
    h: -0.0189,
    s: 0,
    l: -0.15,
  },
  select: {
    h: -0.0189,
    s: 0,
    l: -0.15,
  },
};
type keys = keyof typeof offset | 'pub';

export const getMouseColors = (color16: string) => {
  let theme = new Color(color16);
  // if (theme.r === theme.g && theme.g === theme.b && theme.g === 0) {
  //   theme = new Color(themeColor)
  // }

  const themeHSL = theme.getHSL({} as HSL);
  const temp = new Color();
  const colors = Object.entries(offset).reduce((t, [k, o]) => {
    t[k as keys] = '#' + temp
      .setHSL(themeHSL.h + o.h, themeHSL.s + o.s, themeHSL.l + o.l)
      .getHexString();
    return t;
  }, {} as Record<keys, string>);
  colors.pub = color16

  return {
    theme: '#' + theme.getHexString(),
    ...colors
  };
}