Skip to content

Instantly share code, notes, and snippets.

@ambethia

ambethia/colors.js

Last active January 3, 2025 06:12
Show Gist options
  • Save ambethia/77b569c20a4ea641d9322f6aba8972d4 to your computer and use it in GitHub Desktop.
Save ambethia/77b569c20a4ea641d9322f6aba8972d4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ambethia revised this gist Jan 3, 2025. No changes.
  2. ambethia created this gist Jan 3, 2025.
    34 changes: 34 additions & 0 deletions colors.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    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),
    }