Tailwind Config with Desaturated Grays using OKLCH

tailwind.config.js

import { formatHex, oklch } from "culori";
import type { Config } from "tailwindcss";
import { gray } from "tailwindcss/colors";

export default {
  content: ["index.html", "./src/**/*.{ts,tsx,vue}"],
  theme: {
    extend: {
      colors: {
        gray: Object.fromEntries(
          Object.entries(gray).map(([key, value]) => {
            const { l, c, h, mode } = oklch(value)!;
            return [key, formatHex({ l, c: c * 0.3, h, mode })];
          })
        ),
      },
    },
  },
  plugins: [],
};