Generate Tailwind-style 11-step OKLCH palettes from a single seed color, with a live preview and C# output ready to paste into MonorailCSS's ThemeDefaults.cs.
Live: https://monorailcss.github.io/color-scheme-gen/
- 11-step palettes (
50→950) generated in OKLCH space - Two modes: Foreground (vibrant, saturated) and Neutral (near-gray)
- Tunable chroma scale, hue drift, high-contrast curve, anchor step, dark-side chroma retention
- Compare against any of 22 built-in Tailwind v4 palettes, with per-step deltas
- "Load into controls" reverse-engineers a seed from a Tailwind reference
- Live light/dark demo surfaces to sanity-check the palette in context
- Copy-paste-ready C# output matching
ThemeDefaults.csformatting - Out-of-gamut flagging; canonical OKLCH → sRGB gamut mapping (hue-preserving chroma reduction)
- Auto-suggests a friendly color name from a ~2,200-entry library via OKLab nearest-neighbor
It's a zero-build static site (HTML + ES modules). Because ES modules require HTTP, serve it rather than opening the file directly:
python -m http.server 8000
# or: npx serve .Then open http://localhost:8000.
A GitHub Actions workflow (.github/workflows/deploy.yml) publishes to GitHub Pages on every push to main. It rewrites the <base> tag to the repo's Pages subpath automatically.
To enable: repo Settings → Pages → Source: GitHub Actions.
index.html UI shell
styles.css Styling
app.js UI wiring, state, render
palette.js Generator — L/C curves, chroma/hue logic
color.js sRGB ↔ OKLab ↔ OKLCH, gamut mapping
tailwind-palettes.js Reference Tailwind v4 palettes
color-names.js Generated — name library with OKLab values
benjamin-moore.json Source name data
scripts/build-paint-data.mjs Regenerates color-names.js from the JSON
color-names.js is committed but regenerated by CI; run node scripts/build-paint-data.mjs after editing the source JSON.