Color Palette Generator

How the generator works

Every roll starts from a random base hue, then walks the color wheel in steps of the golden angle (137.5°). That spacing is what keeps colors from clashing: evenly spaced hues keep hitting the same few relationships, while golden-angle spacing lands on a wider, more natural mix of contrasts. It's the same trick used by most serious palette tools, and it means you never get a roll where two colors fight each other.

Saturation is drawn from a comfortable band (55–95%) and lightness from 35–70%, then nudged per swatch so a palette gets one darker color, one lighter, and a few in the middle. A 5-color roll therefore arrives with structure built in — you can usually split it into "text color, background color, accent colors" without changing anything.

Palettes support 3 to 8 colors, with 5 as the default. Three covers a minimal brand mark, five covers most website and app interfaces, and eight gives you enough distinct series for a chart.

How to use it — step by step

1. Roll a palette. Press Space or hit Generate. If a roll isn't right, undo it with ← or the undo button — the full roll history stays available, so you can compare the last few palettes without losing them.
2. Lock what works. Click the lock icon on any swatch to keep that color while the rest re-roll. Keys 1–5 toggle locks too, so you can steer a palette without touching the mouse.
3. Set exact colors with the pipette. Hover a swatch and the actions appear: lock, pipette, copy. The pipette opens your browser's native color picker, where you can type an exact hex or drag to a specific hue — this is how you drop in a brand color or nudge a swatch lighter.
4. Read colors in any format. The pills above the palette switch how each swatch's value is displayed. OKLCH is the default — it's the most perceptually accurate color space (colors that look equally different are equally far apart in the values), which makes it the best format for judging and tuning a palette. HEX / RGB / HSL / CMYK are there for export and compatibility. Copy any single color by clicking its hex, or copy the whole set in the current format with the "Copy" button.
5. Export. The Export panel turns the palette into production code: CSS variables, a Tailwind config (v3 or v4 @theme), JavaScript/ESM, JSON, SCSS, LESS or CSS classes. Copy the code or download it — the filename matches the format.
6. Share. "Copy link" puts the exact palette (including which colors were locked) into a URL. Send it to a teammate or bookmark it — the palette reloads from the link.

What to make with these palettes

Websites and apps

Roll a 5-color palette, assign one dark color to text and one light color to the background, and use the loudest remaining color for buttons and links. Export CSS variables or a Tailwind theme and you have a working interface palette in minutes.

Brands and logos

Start from your existing logo color: pipette it in, lock it, then roll supporting colors around it until the set feels stable. A brand system usually wants one primary, two or three supporting colors, and a neutral pair for text and backgrounds.

Data visualizations

Chart colors need to stay distinct when they sit side by side. A golden-angle roll gives you that spacing for free. Check pairs in the default OKLCH display — the format's perceptual uniformity makes differences (or conflicts) between neighboring colors visible at a glance.

Social and marketing graphics

Fast iteration matters more than theory. Roll, lock, adjust lightness with the pipette, and copy hex codes straight into your design tool. Most graphics use one accent color against a neutral background — you only need two or three colors from the palette to finish.

Pro tips

• Lock one color, then roll — that's the whole trick to steering a random generator.
• Use 3 colors for a minimal mark, 5 for a UI palette, 8 when you need distinct chart series.
• Don't judge a palette by its first roll; the undo history lets you flip back and forth between the last few.
• Read hexes by role, not by hue: darker colors for text, lighter for backgrounds, mid tones for borders and fills.
• Download the export file you actually ship, so the version in your project matches what you approved.

Frequently asked questions

Ready to make a palette?

The fastest way to a finished palette is the same loop designers have used for years: roll, lock what works, roll again. The pipette, undo history and exports all exist to make that loop faster.