Palette Generator
Generate a full 50–950 tint/shade palette from a single brand color using OKLCH, so lightness steps stay perceptually even across every hue. Export as CSS variables or a Tailwind color config.
Nothing leaves the browser. Every step is computed on this device — there is no network request, no logging, and nothing is saved.
:root {
--color-50: #f6f7ff;
--color-100: #cdd2ff;
--color-200: #a9aaff;
--color-300: #8a81ff;
--color-400: #7154ff;
--color-500: #5b21ff;
--color-600: #4c00e2;
--color-700: #3c00bf;
--color-800: #2d0097;
--color-900: #1d006b;
--color-950: #0d003f;
}Pick one brand color and this tool builds a full 50–950 tint/shade scale around it — the same naming convention Tailwind and most design systems use. Your exact input color always lands unmodified at step 500; everything lighter and darker is generated by stepping through OKLCH lightness (L) evenly, so each step looks like a consistent amount of visual change no matter which hue you started from.
That evenness is the actual point of using OKLCH here instead of HSL. HSL's lightness channel is not perceptually uniform — stepping a blue's HSL lightness by 10% and stepping a yellow's by the same 10% produce very different amounts of visible change, because HSL was designed to be easy to compute, not to match how human vision perceives brightness. OKLCH's L channel was specifically built to fix that, so equal steps in L read as equal steps in perceived lightness across every hue.
An optional chroma taper reduces saturation slightly as steps approach white or black, which avoids the muddy, clipped-looking swatches that a naive fixed-chroma ramp produces at the extremes — every swatch that still falls outside what a screen can display is flagged rather than silently shown wrong.
How to use this generator
- 1Enter or pick your brand color — it will appear exactly as given at step 500.
- 2Leave chroma tapering on for smoother results at the light/dark ends, or turn it off to keep saturation perfectly constant across every step.
- 3Check the small warning icon on any swatch flagged as out of gamut — it means that exact OKLCH color can't be displayed on a normal screen and has been clipped to the closest one that can.
- 4Copy individual hex values, or grab the whole scale as CSS custom properties or a Tailwind color object.
Why OKLCH instead of HSL for this
| HSL | OKLCH | |
|---|---|---|
| Lightness is perceptually uniform | No — varies a lot by hue | Yes, by design |
| Equal L steps look like equal visual steps | Not reliably | Yes |
| Can express colors brighter than sRGB allows | No | Yes (may need gamut clipping) |
| Used by | Older CSS, most color pickers | Modern CSS (Color Module 4), this tool |
Frequently asked questions
Why is my input color always "500" instead of the tool picking the closest step?+
So the palette is guaranteed to contain your exact brand color, unmodified, rather than a close approximation. Every other step is built by moving outward from that fixed point in even OKLCH lightness increments — lighter toward step 50, darker toward step 950 — so the scale is always anchored to something you specifically chose.
What does the out-of-gamut warning actually mean?+
Every real screen can only display colors inside the sRGB gamut. OKLCH can describe colors outside it — more saturated than any screen can show at that particular lightness — and when a generated step needs one of those, the tool clips it to the nearest displayable color and flags it. This mostly shows up on very saturated inputs at the lightest or darkest steps, where the sRGB gamut narrows the most.
Should I leave chroma tapering on?+
In most cases, yes — it keeps the lightest and darkest steps from looking washed-out or muddy by gently reducing saturation as lightness approaches white or black, which is roughly how real gamuts behave anyway. Turn it off only if you specifically want constant saturation across the whole scale and don't mind more steps landing out of gamut.
Can I use this output directly as a Tailwind color?+
Yes — copy the Tailwind config block and paste it into your theme's colors object under whatever name you like. The keys already match Tailwind's own 50–950 shade-scale convention.
Why do some hues produce a much wider range of shades than others?+
Very saturated hues (like a pure vivid red or green) have a narrower usable lightness range in real screens before they'd need to go out of gamut, while muted or desaturated hues have more room. This is a real property of color, not a bug in the generator — a highly saturated brand color's palette may show more out-of-gamut flags at the extremes than a muted one.
Related tools
Color Converter
Convert hex, RGB, HSL, OKLCH, and Lab — plus a WCAG contrast checker.
Open toolImage Compressor & Converter
Compress and convert images to JPEG, PNG, or WebP — in your browser.
Open toolCubic Bezier & Easing Editor
Design cubic-bezier() and linear() CSS easing curves visually.
Open toolCSS clip-path Editor
Design polygon, circle, ellipse, and inset clip-path shapes visually.
Open toolGlassmorphism Generator
Design a frosted-glass backdrop-filter effect visually.
Open tool