Color Palette Generator

Color Palette Generator

Press Space for a new random palette. Lock colors you like, fine-tune hue and brightness, then export to CSS, Tailwind, JSON, SCSS, LESS or CSS classes. Everything runs in your browser — nothing is uploaded.

#60e667

hsl(123, 73%, 64%)

#b495ee

hsl(261, 72%, 76%)

#de9c2b

hsl(38, 73%, 52%)

#60e6dc

hsl(176, 73%, 64%)

#ee95db

hsl(313, 72%, 76%)

:root {
  --color-1: #60e667;
  --color-2: #b495ee;
  --color-3: #de9c2b;
  --color-4: #60e6dc;
  --color-5: #ee95db;
}

How to use the color palette generator

  1. Press the Space bar (or hit Generate) to roll a new harmonious palette — each color follows the golden-angle rule for a pleasing, balanced result.
  2. Click the lock icon on any swatch to keep a color while the rest randomize. Keys 1–5 toggle locks too.
  3. Hover a swatch and use ↻ / ↺ / +sat / +lt / -lt to nudge hue, saturation or brightness on a single color.
  4. Open Export to grab CSS variables, a Tailwind config, JSON, SCSS, LESS or ready-to-paste CSS classes. Copy the code or download the file.
  5. Click any swatch hex to copy it in a single click.

Why use a random palette generator?

Choosing a color scheme is the hardest part of most design work. A generator removes the blank-page problem: it produces color combinations that already satisfy basic harmony rules, so you can judge fit instead of inventing from scratch.

The palette is generated in HSL space using the golden angle (137.5°). Spacing hues by the golden ratio avoids the clashing, same-y feel of evenly spaced hues while keeping saturation and lightness balanced — a trick used by popular palette tools to make every roll feel intentional.

Frequently asked questions

Are generated palettes free to use in my designs?

Yes. Colors are not intellectual property — every palette produced here is free for commercial and personal projects.

Do my colors get uploaded to a server?

No. The generator runs entirely in your browser. There is no backend, no upload, and no account required.

Can I save a palette for later?

Copy the hex codes, or download any export format (CSS, Tailwind, JSON, SCSS, LESS). Your exports are saved where you put them.

Why do some palettes look better than others?

Every roll starts from a random base hue and walks the color wheel by the golden angle. Some combinations will resonate with your project more than others — that's the point of generating: quick iterations until one clicks.