Dynamic palette on Next.js

generateSwatch.js

const Spline = require("cubic-spline");
const tinycolor = require("tinycolor2");

function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}

function generateSwatch(lightColor, seedColor, darkColor, hueInvariance) {
  const light = tinycolor(lightColor);
  const seed = tinycolor(seedColor);
  const dark = tinycolor(darkColor);

  const lightHsv = light.toHsv();
  const seedHsv = seed.toHsv();
  const darkHsv = dark.toHsv();

  lightHsv.h = ((lightHsv.h + 180) % 360) - 180;
  seedHsv.h = ((seedHsv.h + 180) % 360) - 180;
  darkHsv.h = ((darkHsv.h + 180) % 360) - 180;

  const xs = [0, 500, 1000];
  const hs = [lightHsv.h, seedHsv.h, darkHsv.h];
  const splineH = new Spline(xs, hs);

  const ss = [lightHsv.s, seedHsv.s, darkHsv.s];
  const splineS = new Spline(xs, ss);

  const vs = [lightHsv.v, seedHsv.v, darkHsv.v];
  const splineV = new Spline(xs, vs);

  const swatch = [];
  for (let x of [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]) {
    const h =
      (splineH.at(x / hueInvariance + (500 - 500 / hueInvariance)) + 720) % 360;
    const s = clamp(splineS.at(x), 0, 1.0);
    const v = clamp(splineV.at(x), 0, 1.0);
    swatch.push({ x: x, color: tinycolor({ h: h, s: s, v: v, a: 1 }) });
  }

  return swatch;
}

module.exports = generateSwatch;

palette.js

const tinycolor = require("tinycolor2");
const generateSwatch = require("./generateSwatch");

const light = "#FFFFFF";
const dark = "#000000";

const getTailwindPalette = (seed) => {
  const lightColor = tinycolor(light);
  const darkColor = tinycolor(dark);
  const seedColor = tinycolor(seed);

  const hueInvariance = 3;
  const palette = generateSwatch(
    lightColor,
    seedColor,
    darkColor,
    hueInvariance
  );
  const rgbPalette = palette.map((color) => {
    return {
      color: color.color.toHexString(),
      num: color.x,
    };
  });

  const objPalette = rgbPalette.reduce(
    (palette, color) => {
      palette[color.num] = color.color;
      return palette;
    },
    {}
  );

  return objPalette;
};

module.exports = getTailwindPalette;

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
const palette = require("./palette");

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Montserrat", ...defaultTheme.fontFamily.sans],
        mono: ["Fira Code", ...defaultTheme.fontFamily.mono],
      },
      colors: {
        primary: palette("#28F3CE"),
        secondary: palette("#002551"),
        action: palette("#F2941B"),
        body: "#FFFFFF",
      },
      letterSpacing: {
        logo: "0.18em",
      },
    },
  },
  plugins: [require("daisyui")],
};