Color palette scale generator (50 to 950, OKLCH)
Generate a 50 to 950 OKLCH colour scale from one brand colour, with light and dark shadcn tokens and a WCAG contrast report. Free to use, no account.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this generator
Enter a base colour as hex and adjust chroma, hue and lightness. The generator builds an eleven-step scale from 50 to 950 in OKLCH, can pin your base colour to a step, and adds a tinted neutral scale.
From the scale it derives a shadcn token set for light and dark, and reports the WCAG contrast ratio of each foreground and background pair. Export CSS variables, a Tailwind v4 @theme block or the contrast report as JSON.
How to use it
- Type your brand colour as hex.
- Adjust chroma, hue and lightness.
- Review the contrast report for each token pair.
- Copy the CSS variables or the Tailwind v4 theme.
This generator is also a component of the kit: Generator Palette Scale, installed as source in your project.
Want this inside your project?
Agentic UI Kit installs this generator and the other 1156 components as source files, with one theme for all of them. One-time license, unlimited projects.