OKLCH Palette Generator
Turn one brand color into a full 50–950 production scale with live component preview.
:root {
--brand-50: oklch(0.976 0.015 225.93);
--brand-100: oklch(0.926 0.038 247.2);
--brand-200: oklch(0.842 0.08 254.37);
--brand-300: oklch(0.765 0.121 257.47);
--brand-400: oklch(0.695 0.16 259.75);
--brand-500: oklch(0.623 0.188 259.81);
--brand-600: oklch(0.514 0.161 259.81);
--brand-700: oklch(0.419 0.134 259.81);
--brand-800: oklch(0.329 0.107 259.81);
--brand-900: oklch(0.243 0.079 259.81);
--brand-950: oklch(0.2 0.066 259.81);
}A palette, not a single color
A production color system needs a full ramp — background tints, borders, text and accent shades. This generator builds all eleven steps at once and previews them on real buttons, badges and alerts so you can judge them in context.
Accessibility data at every stop
Each step reports its contrast against black and white, and flags whether it fits sRGB. Pick text/background pairs whose ratio clears WCAG for your use case.
Frequently asked questions
How are the color scales generated?
Lightness follows a non-linear curve, chroma peaks mid-scale and tapers at the ends, hue stays fixed, and every step is gamut-mapped to your target space.
Can I export to Tailwind or CSS variables?
Yes — switch the export tab to Tailwind v4, Tailwind v3, CSS Variables, SCSS, JSON Tokens or Style Dictionary and copy the whole block.
Does it support wide-gamut P3?
Choose the P3 or Rec.2020 gamut to keep more chroma at the vivid steps; sRGB stays the safe default.