OKLCH Color Palette Generator
Input any base color to automatically calculate an accessible 50–950 shade scale with optical lightness uniformity and gamut-safe chroma clipping — or build a custom palette of unrelated colors below it, where every color can be pasted in as text, changed in the color picker, or collected straight from the scale with one click on the swatch you like.
writes to --color-primary-*
Click a step to copy its value or save it as --color-primary-<step>, or add it to the custom palette below.
4 independent colours · no shared scale · paste a value or click a swatch to edit it
- --color-brandP3
- --color-accentP3
- --color-surface
- --color-text
@theme {
--color-brand: oklch(58.0% 0.210 255.0);
--color-accent: oklch(72.0% 0.170 70.0);
--color-surface: oklch(28.0% 0.030 265.0);
--color-text: oklch(96.0% 0.010 265.0);
}How Our Perceptual Scale Generator Works
Traditional palette generators blindly interpolate HEX or RGB values, causing midtones to look muddy, hues to shift unexpectedly, and highlights to lose color purity. In contrast, our generator works directly within the 3D cylindrical coordinates of the OKLCH color space:
Maps lightness across 11 mathematically balanced steps from 97% (step 50) down to 13% (step 950), maintaining even visual steps between shades.
Calculates the maximum possible chroma allowed within the sRGB and Display-P3 gamuts for every individual lightness level, preventing harsh clipping artifacts.
Locks the hue angle exactly across all shade steps, eliminating the notorious "purple turning into pinkish-gray" bug seen in RGB generators.
Calculating Harmonies via Cylindrical Hue Angles
Because OKLCH organizes colors along a continuous 360-degree cylindrical circle, generating complementary, triadic, and analogous palettes is achieved by exact mathematical angle rotations while preserving lightness and chroma constancy:
- Complementary: Hue angle + 180° for maximum visual contrast.
- Triadic: Hue angles ± 120° for vibrant, balanced triad schemes.
- Analogous: Hue angles ± 30° for smooth, adjacent gradients and tranquil UI accents.
Frequently Asked Questions
Can I build a palette of different colors instead of one color's scale?
Yes — the Custom palette panel under the harmonies. A 50–950 scale is one hue walked up and down in lightness, so all eleven steps are variations of the same color; a real brand palette is the opposite, and that is what this panel is for. Add a row, click its swatch to change it in the color picker, and type the variable name your own system already uses. Each row's value is a text field, so you can paste a color straight in — hex, rgb(), hsl() or oklch(), from a brand sheet, devtools, or the scale above — and press Enter; the row normalizes to the exact oklch() that will be copied. Copy all grabs the whole set as a Tailwind v4 @theme block, a :root block or JSON, and the preview above that button is character-for-character what lands on your clipboard. Two rows given the same name drop the second from the block instead of letting the browser silently pick a winner. Your palette — and the base colour the scale above is generated from — are stored in this browser, so both survive a refresh and a round trip through the picker.
Can I export the generated scale directly into Tailwind CSS v4?
Yes! Type any variable name into the Variable field above (for example brand-accent) and click "Fill --color-brand-accent-*". The role is created on first use, so you never have to add it to the cart beforehand. Then visit the Export page to copy your complete Tailwind v4 @theme block.
What happens when I click a swatch?
A small menu opens next to that swatch, so copying a single value and collecting it are separate choices instead of one guess. Pick Copy OKLCH or Copy hex to put the value on your clipboard, Save to variable to write it into --color-<your-name>-<step>, Copy and save to do both in one go, or Add to custom palette when you like that step and want it as a standalone --color-<name> variable in the panel below — the new row takes the color exactly as shown and drops the caret in its name field. Your cart is only ever rewritten when you choose one of the two save actions, and the same menu appears on every hue-harmony swatch. The Random button next to the presets throws a fresh in-gamut base colour to explore from.
Why are extreme light and dark shades lower in chroma?
In human color perception and physics, as colors approach pure white (100% Lightness) or pure black (0% Lightness), the gamut triangle narrows to a point. Naturally tapering chroma at steps 50, 100, 900, and 950 produces clean, sophisticated UI tokens rather than harsh neon pastels.