How to Generate a Color Palette

1. Start from harmony, not randomness

Truly random colors clash. Designers instead rely on color harmony — relationships between hues that the eye finds balanced. The classic schemes are:

• Complementary — opposite sides of the wheel, high contrast.
• Analogous — neighbors on the wheel, calm and cohesive.
• Triadic — three evenly spaced hues, vibrant but balanced.
• Golden angle — spacing hues by 137.5°, a natural-photography shortcut that avoids clashes.

This generator uses the golden angle, so every roll is already harmonious — no color-theory homework needed.

2. Control saturation and lightness

Hue gets all the attention, but saturation and lightness do the real work. For a UI palette:

• Keep saturation moderate (50–85%) — full saturation is exhausting at scale.
• Keep lightness between 20% and 80% so text stays readable on every swatch.
• Mix one dark, one light, and three middle colors for depth.
• Hover a swatch and use +sat / +lt / -lt to fine-tune any single color.

3. Lock, re-roll, iterate

Great palettes are rarely first-roll. The lock button is the fastest workflow: lock a brand color or a swatch that works, re-roll the rest, and iterate until the whole set feels right. Keyboard 1–5 toggles locks, and the spacebar re-rolls, so the whole loop is hands-on.

4. Export into your stack

Once the palette is set, the Export menu hands you production-ready output:

• CSS variables — drop into :root.
• Tailwind config — paste into theme.extend.colors.
• JSON — for design tokens and Figma-style tooling.
• SCSS / LESS — variables for preprocessor projects.
• CSS classes — swatch classes you can paste straight into a stylesheet.