Random Color Generator
Generate random colors live — bright, pastel, vivid, dark or harmonious — with lockable swatches, a reproducible seed, named colors, and CSS / SCSS / JSON / Tailwind v3 + v4 export.
About this ToolHow it works, benefits & use casesTap to collapse
Generate random colors that are actually usable, not just noise. Choose how many colors you want (3 to 12) and a mode — Any, Bright, Dark, Light, Pastel, or Vivid — and the Random Color Generator produces a palette live, each swatch labelled with its exact or nearest CSS color name and the best overlay text color. Turn on Harmonious to space the colors evenly around the wheel for a coordinated set instead of independent randoms. Every palette is reproducible: it is driven by a numeric seed you can read, edit, or reroll, so the same seed always yields the same colors. Lock individual swatches to keep a brand or favourite color fixed while you reshuffle the rest with the Generate button. Each color shows its HEX, RGB, and HSL with one-click copy, and you can export the whole palette as CSS variables, SCSS, a JSON array, a JS hex array, or Tailwind tokens for both v3 and v4 — all in your browser.
How to Use
- 1Pick a color mode (Any, Bright, Dark, Light, Pastel, or Vivid) and the number of colors from the dropdowns.
- 2Optionally enable "Harmonious" to evenly space the colors around the color wheel (this overrides the mode).
- 3Press "Generate" to reshuffle — or change the Seed and reroll the dice for a reproducible palette.
- 4Click the lock icon on any swatch to keep it fixed while you regenerate the others.
- 5Copy a color's HEX, RGB, or HSL with the per-row copy buttons.
- 6Choose an export format (CSS, SCSS, JSON, hex array, or Tailwind v3/v4) and copy or download the palette.
Key Benefits
- Six generation modes plus a Harmonious option for coordinated sets
- Reproducible output via an editable numeric seed
- Lock individual swatches to keep brand colors fixed while reshuffling
- Each color labelled with its exact or nearest CSS name
- HEX, RGB, and HSL with one-click copy on every swatch
- Exports CSS variables, SCSS, JSON, JS hex array, and Tailwind v3 + v4
- Generates 3–12 colors live, entirely in your browser
Common Use Cases
- Brainstorming a fresh palette when starting a new design
- Building a coordinated set around a locked brand color
- Generating placeholder swatches for mockups and prototypes
- Producing reproducible test palettes via a fixed seed
- Exporting random colors straight to CSS variables or Tailwind tokens
Evenly spaced on the wheel
Reproducible
Press Generate to reshuffle. Locked swatches stay put — handy for building around a brand color.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Color Scheme GeneratorBuild colour harmonies with full 50–950 ramps, a WCAG accessibility matrix, and a live UI preview — export CSS, Tailwind, SCSS, JSON or SVG
- Changelog GeneratorGenerate changelog from Git commit history
- Component Name GeneratorTurn a description into ranked, kind-aware component names with a file scaffold and a name validator (casing, collisions, clarity)
- Heroku Procfile GeneratorBuild a Heroku Procfile and matching app.json — process types, env vars, addons, dyno formation — plus a Procfile parser and audit
- Markdown TOC GeneratorGenerate table of contents for Markdown
- Package.json Scripts GeneratorGenerate common npm scripts for different project types and workflows
Each mode constrains the random colors: Bright and Vivid keep saturation and lightness high, Pastel produces soft low-saturation colors, Light and Dark bias toward the top or bottom of the lightness range, and Any allows the full spectrum. The mode is disabled while Harmonious is on, since harmonious mode controls the hues itself.
The generator is seeded by the number shown in the Seed field, so the same seed with the same mode, count, and harmonious setting always produces the identical palette. Edit the seed or click the dice to get a new one, and share or note the seed to recreate a palette later.