@thangk/easythemer/src/converters/HSLToHex.ts

Easily generate shades from a colour palette for use in your app

import { HSL, Hex } from "../types";

// inspired by https://www.jameslmilner.com/posts/converting-rgb-hex-hsl-colors/
export default function HSLToHex(source: HSL): Hex {
  let { h, s, l } = source;

  l /= 100;
  const a = (s * Math.min(l, 1 - l)) / 100;
  const f = (n: number) => {
    const k = (n + h / 30) % 12;
    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
    return Math.round(255 * color)
      .toString(16)
      .padStart(2, "0"); // convert to Hex and prefix "0" if needed
  };
  return `#${f(0)}${f(8)}${f(4)}`;
}