Color Palette Generator Online Free
Build beautiful five-color palettes in seconds. Pick a base color, choose a harmony rule (random, monochromatic, analogous, complementary, split-complementary, triadic, or tetradic), lock the colors you love, hit space, and copy any hex with a click.
How to Generate a Color Palette
Pick a Base Color
Click the color swatch and pick or paste a base hex code.
Choose a Harmony Rule
Pick a harmony rule: random, analogous, complementary, triadic, or tetradic.
Lock, Regenerate, Copy
Lock colors you like, press space to roll new ones, then copy the hex.
Five-Color Palettes With Real Theory
Pick a base color and the generator applies seven harmony rules drawn from classic color theory: monochromatic, analogous, complementary, split-complementary, triadic, tetradic, and free random.
Lock the colors you love, hit space to reroll the rest, and copy the entire palette as CSS variables or a JSON array.
Why Use Our Color Palette Generator?
7 Harmony Rules
Pick from seven color-theory presets, Random for pure inspiration, Monochromatic for tonal variations of one hue, Analogous for adjacent hues that feel calm, Complementary for high-contrast pairs, Split-Complementary for softer contrast, Triadic for three evenly spaced hues, and Tetradic for a vibrant four-hue rectangle. Every preset is generated from your base color using HSL maths in your browser.
Lock & Iterate
Found a swatch you love but want to keep exploring? Click the lock icon on that swatch, it stays put while every other swatch regenerates. Hit space (or the Generate button) over and over until the rest of the palette clicks. Perfect for iterating around an existing brand color or hero image color.
Click to Copy
Click any swatch and its hex code lands on your clipboard instantly, no extra modal, no select-all-then-copy gymnastics. Or click Copy CSS to grab the whole palette as ready-to-paste CSS custom properties (`--color-1: #…;`), or Copy JSON for an array you can drop straight into a config file or design token system.
Spacebar Workflow
Built for keyboard-first explorers. Press the spacebar to generate a fresh palette without leaving the page or moving your mouse. Combine it with locks for an addictive iteration loop: lock the color you like, tap space, evaluate, lock another, tap again, until the whole palette feels right.
Similar Tools
More Image tools you might find useful.
Frequently Asked Questions
Common questions about color harmony and using this generator.
What is a color harmony and which one should I pick?
A color harmony is a rule for placing colors on the color wheel so they feel intentional together. Monochromatic uses a single hue at different lightness/saturation, calm and minimal. Analogous uses 30-60° neighbours, soft and editorial. Complementary uses opposite hues (180°), high contrast, great for CTAs. Split-Complementary swaps one of the complement pair for its two neighbours, bold but easier to balance. Triadic spaces three hues 120° apart, vibrant and playful. Tetradic uses two complementary pairs, rich, but use with one hue dominant.
How does the Lock feature work?
Each swatch has a lock icon that appears when you hover (and is always visible on mobile). Click it once to lock that swatch, its color will be preserved on every Generate / spacebar regeneration. Click it again to unlock. You can lock as many swatches as you like, including all five (in which case Generate becomes a no-op). Locks let you anchor known good colors, like a brand primary, while iterating on supporting colors.
How do I use Copy CSS and Copy JSON?
Copy CSS produces a `:root` block with five custom properties (`--color-1` through `--color-5`) ready to paste into a stylesheet. Copy JSON produces a five-element array of uppercase hex strings ready to drop into a tokens file, a Tailwind `theme.colors` block, a Figma plugin, or anywhere else you want machine-readable data. Both copies use the live, locked palette currently displayed.
Does this tool send my colors anywhere?
No. Every palette is generated entirely in your browser via HSL maths, there is no API call, no analytics on your colors, and no login. Open the Network tab in your browser dev tools while you generate; you will see zero outbound requests carrying color data. Use this tool freely for client work, brand development, or NDA-protected design systems.