Generate Tailwind-style 50–950 shade scales from a base color and export them as CSS or config.
Loading tool
About Color Palette Generator
Generates an 11-step color scale (50, 100, 200 ... 900, 950) from a single base color, built in the OKLCH color space and gamut-mapped by reducing chroma. The base color keeps its exact value at the step with the closest lightness. Each swatch shows its WCAG contrast against white and black, and the scale exports as CSS custom properties, a Tailwind v4 @theme block (OKLCH values), a Tailwind v3 config or JSON.
Common uses
- Create a full brand color scale for Tailwind CSS from one hex code
- Generate CSS variables for a design system's primary color
- Pick which shades are safe for text on white or black backgrounds
- Migrate a custom palette to Tailwind v4's OKLCH @theme format
FAQ
- Why generate palettes in OKLCH instead of HSL?
- OKLCH is designed so equal lightness steps look roughly equally different to the eye. HSL lightness is not perceptual, so a yellow and a blue at the same HSL lightness look very different in brightness.
- How do I add the palette to Tailwind v4?
- Paste the exported @theme block into your main CSS file. Variables named --color-brand-500 and so on create utilities like bg-brand-500 and text-brand-700.
- Where does my base color end up?
- At the step whose reference lightness is closest to it, so a mid-tone usually lands at 500 or 600. The other steps are spread above and below it.