Shade Generator
Generate perceptually uniform color palettes using OKLCH for design systems
About the OKLCH Shade Generator
The Shade Generator creates a full 11-step color palette (50–950) from any base color using the OKLCH color space. OKLCH stands for Oklch Lightness, Chroma, and Hue — a perceptually uniform color model where equal changes in lightness values look equally different to the human eye, unlike HSL where darker shades can appear to jump unevenly.
Palette algorithms
- Balanced (Tailwind-style) — Mimics the lightness distribution used by Tailwind CSS's official color palette. A safe default for most design systems.
- Vibrant — Maintains higher chroma (saturation) across all shades, producing more vivid colors at the extremes.
- Natural — Desaturates chroma at the very light and very dark ends, closely matching how pigment-based colors behave in the physical world.
Export formats
- Tailwind v3 Config — A JavaScript object ready to paste into
tailwind.config.jsundertheme.extend.colors. - Tailwind v4 (CSS) — CSS custom properties using the
@themesyntax introduced in Tailwind CSS v4. - CSS Variables — Standard
:rootcustom property declarations compatible with any CSS framework. - SCSS Variables — A map of SCSS variables for projects using Sass.
- JSON — A plain JSON object for use in design token pipelines, Style Dictionary, or custom build tools.
Common use cases
- Building a branded color palette for a Tailwind CSS design system
- Generating accessible color ramps that satisfy WCAG contrast requirements across shades
- Replacing hand-picked color scales with algorithmically consistent ones
- Exploring how a single brand color scales across light and dark themes