Color Palette Generator
Hit Generate (or the spacebar), lock what you love, and keep rolling until every color sits right — or start from your own base color or a curated preset, from a Japandi living room to the Amiga Workbench. Export as CSS, SCSS, Tailwind, JSON or PNG, free and unlimited. Runs 100% in your browser.
The most varied type: neighbors, a triad step and the complement around one hue.
No base color: every Generate rolls a random hue. Set one to build the palette around it.
Start from a preset
Pick a theme, then click a color to build around it — or take over the whole palette.
Product and platform names only describe where the colors come from — there is no affiliation with their owners.
Generate, lock, repeat — why this workflow wins
Nobody designs a five-color palette in one stroke. What actually happens is recognition: you see a color that works, you keep it, and you re-roll the rest around it. That is exactly what the lock buttons do. A typical session takes under a minute — lock a base you like on the second or third roll, then let the generator negotiate the remaining slots against it, locking one more each round until the set clicks.
Constrained randomness, not noise
Uniformly random RGB colors are a famous disappointment: most of the RGB cube is dark, desaturated sludge, and unrelated hues rarely cohere. This generator works differently. Each round picks one base hue, then derives candidates through classic harmony relations — same hue, neighbors at ±25°, the complement and its splits — with controlled jitter. Lightness is deliberately spread from dark to light across the slots (in OKLCH, where “lightness” matches your eyes), because a usable palette needs a dark anchor, a light surface and things between. The result reads like a scheme, not a lottery.
Eight palette types — from one hue to a full chart set
The type decides how the hues of a palette relate. Mixed, the default, wanders the most; the classic color-wheel schemes follow tighter rules, and two practical types cover interfaces and charts.
| Type | How the hues relate | Good for |
|---|---|---|
| Mixed | Neighbors, a triad step and the complement around one hue | Exploring, mood boards |
| Monochromatic | One hue, from dark to light | Calm interfaces, brand scales |
| Analogous | Neighbors within ±5° to ±90° of the base hue | Nature themes, staying in one color family |
| Complementary | The base hue and its opposite | Calls to action, strong contrast |
| Split-complementary | The base and the two hues 5°–60° beside its opposite | Contrast with less tension |
| Triadic | Three hues 120° apart | Playful, balanced designs |
| Neutral + accent | Tinted grays and one vivid accent | Dashboards, documentation, product UI |
| Chart | Evenly spaced hues at equal lightness, up to eight | Bar, line and pie charts |
The angle slider sets how far the hues may spread. For Analogous it is the hue range around the base: ±15° keeps a green palette green, ±60° reaches from yellow to blue. For Split-complementary it moves the two splits — near 5° they merge into the plain complement, at 60° they form a triad. Every rule works on the OKLCH hue, where equal angles look like equal steps.
Each color also opens its own shade row: ten lighter and darker steps in the same hue, the 50–900 scale known from Tailwind. Click a shade to swap it in — it is locked straight away, so the next Generate keeps it. A shade of the base color becomes the new base, and the rest of the palette follows.
Start from your own color — or a preset
A palette rarely starts from nothing: there is a brand color, a sofa, a paint chip on the wall. Set it as the base color and the generator stops rolling random hues. It keeps your color, locked in the slot that matches its lightness, and builds the rest around its hue through the same harmony relations. Its vividness carries over too — a muted base yields a calm palette, a saturated one a lively palette.
No color in mind yet? The preset catalog groups ready-made palettes by theme: interfaces, rooms and walls, moods and nature, eras from the Baroque to the 2010s, clothing, craft and culture, and retro computers. Click any color to use it as the base, or take over the whole palette. Where a historical palette has documented values — Amiga Workbench, Windows 95, IBM CGA, Material Design — the catalog uses them exactly; where none exist, the note under its name says so. The room, clothing and mood palettes are curated for everyday use.
What the five slots are for
| Slot | Typical role | Typical share |
|---|---|---|
| Darkest | Text, dark anchor | 10–30% |
| Dark-mid | Primary brand / dominant | ~30% |
| Mid | Secondary, hovers, illustration | ~20% |
| Vivid | Accent — buttons, highlights | ~10% |
| Lightest | Background, surfaces | 30–60% |
The 60-30-10 rule is a good default: dominant color on most of the surface, a secondary on about a third, the accent kept scarce so it stays special.
Free export, on purpose
The big palette sites gate exports behind subscriptions. Here every format is free and unlimited: CSS custom properties for plain stylesheets, SCSS variables, a Tailwind theme.extend.colors fragment, JSON for tooling, and a PNG swatch sheet for decks and mood boards. “Save all” also drops the palette into My colors, so you can immediately test pairs in the contrast checker or expand a favorite into a full ramp with the shades generator. Everything runs 100% in your browser — nothing is uploaded, no account exists to upsell.
Already have a palette that clashes? The color palette fixer keeps the colors that must stay and moves only the rest, by the smallest change that works.
Frequently asked questions
How does the generate-and-lock workflow work?
Press Generate (or the spacebar) for a fresh palette. When a color you like appears, lock it — locked colors survive every following generation while the rest keep exploring. Repeat until every color is locked.
Are the palettes really random?
The randomness is real (each round draws a fresh seed from your browser’s crypto-grade generator), but it is constrained: each round picks a base hue and derives the other colors through harmony-style hue relations, spread across a lightness range in the perceptual OKLCH space. Set a base color and its hue replaces the random one — and the palette’s vividness follows it, so a muted sage yields a muted palette. Pure uniform randomness mostly produces mud.
Can I build a palette around my own color?
Yes — type or paste it into Base color, pick it on the wheel, take over the color you last set in the color wheel, or click any color in the preset catalog. The base color stays locked in the slot that matches its lightness, and every Generate builds the remaining colors around its hue. “Use palette” in the catalog loads a complete preset instead.
Which palette types can I generate?
Eight: Mixed (the default — neighbors, a triad step and the complement around one hue), Monochromatic (one hue, dark to light), Analogous (neighboring hues within a range you set), Complementary (a hue and its opposite), Split-complementary (a hue and the two neighbors of its opposite), Triadic (three hues 120° apart), Neutral + accent (tinted grays and one vivid color) and Chart (evenly spaced hues at equal lightness, for data series). Every type works with a base color, locks and all exports.
How do I keep a palette in one color family — only greens, for example?
Set a green as the base color, choose Analogous and narrow the hue range: at ±15° every color stays within 15° of your green, so the palette runs from yellowish to bluish greens and never leaves the family. Monochromatic is stricter still — one hue, and only lightness and vividness change. Mixed, the default, deliberately wanders further, up to the complement.
Can I make one color a little lighter or darker?
Yes — the shades button on each color opens a row of ten lighter and darker steps in the same hue, the 50–900 scale known from Tailwind. Click one to swap it in; it is locked right away, so the next Generate keeps it. Picking a shade of the base color moves the base, and the rest of the palette follows.
Is exporting free? Are there limits?
Completely free and unlimited — copy CSS custom properties, SCSS variables or a Tailwind config fragment, or download JSON and a PNG swatch sheet. No account, no watermark, no pro tier.
How many colors should a real project palette have?
Five is the sweet spot and the default here: a dark and a light neutral, one dominant color, one supporting color, one accent. Three covers the classic 60-30-10 rule (dominant, secondary, accent), four suits a compact brand identity, six leaves room for a second accent. Beyond six a palette turns into a design system — keep five and expand each color into a 50–900 ramp with the shades generator instead of adding more random colors. Charts are the exception: every data series needs its own distinct color, so the Chart type goes up to eight.
Does this tool upload anything?
No — generation, locking and every export run 100% in your browser. It even works offline once the page is loaded.