Color Palette Generator
Generate harmonious palettes, lock favorites, and build Tailwind-style shade ramps
- Files never leave your device
- Runs in your browser
- Free, no sign-up, no watermark
3b82f6
e24956
3ba01b
How to use Color Palette Generator
Create color palettes three ways: harmony rules from a base color, random palettes you can lock and reroll, or an 11-step shade scale from 50 to 950 like Tailwind's. Colors are computed in OKLCH, and every palette exports to CSS, Tailwind v3 or v4, JSON, .gpl or .ase.
- 1
Choose a Mode: Harmony, Random or Shades.
- 2
For Harmony or Shades, set the Base color, then pick a Rule, or a Color name and the step to Keep base at.
- 3
For Random, click Generate or press Space, and lock the colors you want to keep before generating again.
- 4
Hover a color and click the copy icon; in Harmony you can also make it the new base color.
- 5
Under Export, choose HEX, CSS, Tailwind v3, Tailwind v4 or JSON and copy the code, or download .gpl or .ase.
Frequently asked questions
Why are harmonies calculated in OKLCH?
Hues are rotated in OKLCH, so every color keeps the base color's perceived lightness and vividness. Rotating in HSL would make yellows look much lighter than blues.
How are the shades from 50 to 950 built?
Lightness follows a curve close to Tailwind's own palettes, and chroma peaks around 500–600. Your base color is kept exactly at its step; Auto picks the step closest to its lightness.
Can I go back to an earlier random palette?
Yes. Use Previous palette and Next palette; the last 50 palettes are kept while the page is open, but nothing is saved after you close it.
How many colors can a palette have?
Random palettes have 2 to 10 colors (use the − and + buttons). Harmony rules give a fixed number, for example 2 for complementary and 5 for analogous or monochrome, and Shades always gives 11.
What does the Tailwind v4 export look like?
An @theme block of --color-* variables, ready to paste into your CSS. Shades are written as oklch() values named like --color-brand-500; other modes use HEX.