OKLCH Color Ramps

colors.js

import { converter, differenceEuclidean, formatCss, toGamut } from 'culori'

const shades = [50, ...Array.from({ length: 9 }).map((_, i) => (i + 1) * 100), 950]
const chroma = [0.0108, 0.0321, 0.0609, 0.0908, 0.1398, 0.1472, 0.1299, 0.1067, 0.0898, 0.0726, 0.054]
const lightness = [97.78, 93.56, 88.11, 82.67, 74.22, 64.78, 57.33, 46.89, 39.44, 32, 23.78]

export function generatePalette(hue) {
  const oklch = converter('oklch')
  const ramp = Object.fromEntries(
    shades.map((k, i) => {
      const color = oklch(
        toGamut(
          'p3',
          'oklch',
          differenceEuclidean('oklch'),
          0,
        )('oklch(' + lightness[i] + '% ' + chroma[i] + ' ' + hue + ')'),
      )
      ;[...'lch'].forEach((k) => (color[k] = parseFloat(color[k].toFixed(2))))
      return [k, { value: formatCss(color) }]
    }),
  )
  ramp['DEFAULT'] = ramp['500']
  return ramp
}

export const colors = {
  lifemark: generatePalette(165),
  spellfire: generatePalette(20),
  sunweave: generatePalette(75),
  tidemark: generatePalette(180),
  twilight: generatePalette(280),
  zephyr: generatePalette(250),
}