Palette Generator
Start from one color and get a harmonious five-color palette with a full 50–950 scale for each. Lock the ones you like and press space to reroll the rest.
How the palettes are built
Harmonies rotate the hue of your base color around the color wheel — 180° for complementary, ±30° and ±60° for analogous, 120° steps for triadic, 150° and 210° for split-complementary, 90° steps for tetradic — and add lighter or darker variants so the five colors work together as backgrounds, surfaces and accents.
All the math happens in OKLCH, a perceptual color space. Rotating hue there keeps colors looking equally light, which classic HSL wheels don't: HSL yellow and HSL blue at “50% lightness” look nothing alike.
Each tint scale uses fixed lightness targets from 50 (nearly white) to 950 (nearly black), similar to Tailwind's default palette, with chroma peaking around 500–600. Your exact color sits on the nearest step (outlined), and the neighbouring steps bend smoothly to meet it.
Lock, randomize and share
Click the padlock on any color to keep it, then press Space (or the Randomize button) to reroll everything else. Editing a color with its pencil button locks it automatically. The page address always holds the full palette, so copying the link shares exactly what you see.
Questions
How do I use the palette in Tailwind CSS?
For Tailwind v3, paste the “Tailwind v3” snippet into theme.extend.colors in tailwind.config.js, then use classes like bg-blue-500. For Tailwind v4, paste the @theme block into your main CSS file. Scale names come from each color's hue, so rename them if you prefer names like brand.
Which harmony should I pick for a website?
Analogous and monochrome palettes are calm and easy to use for UI. Complementary and split-complementary give one strong accent for buttons and links. Triadic and tetradic are lively; use one color as the main one and the others sparingly.
Why use OKLCH instead of HSL?
OKLCH is perceptually uniform: a step in lightness looks the same size across hues, and changing hue doesn't change how light a color looks. That's why the 50–950 scales come out evenly spaced for every color, not just blues.
Are the scale colors accessible?
As a rough guide, text in the 600–950 range reads well on 50–100 backgrounds, and 50–200 text reads well on 800–950. Always check your exact pair with the contrast checker.