Color Palette Generator
Press Space or hit Generate for a new palette — click the lock on any color to keep it while the rest shuffle, or start from your own color and build a palette using real color theory. Runs entirely in your browser.
What do these color theory terms mean?
| Complementary | Your base color plus the color directly opposite it on the color wheel — high contrast, energetic. |
| Analogous | Colors that sit next to each other on the color wheel — naturally harmonious, low contrast. |
| Triadic | Three colors evenly spaced around the color wheel, 120° apart — vibrant but balanced. |
| Tetradic | Four colors evenly spaced, 90° apart — the richest variety, hardest to balance. |
| Monochromatic | A single hue in different shades and tints — safest choice, always cohesive. |
Frequently asked questions
How do I keep a color while the rest change?
Click "Lock" under any swatch — locked colors are skipped when you generate a new palette, so you can build around one or two colors you already like instead of starting over each time.
Can I start from a specific color?
Yes — switch to any mode besides Random and set a base color, either by clicking the swatch to open a color picker or typing a hex code directly. The rest of the palette is built from that color using the selected color theory rule.
Does this check color contrast or accessibility?
No, not currently — this tool is purely for generating palettes. If you need to confirm a text/background pairing meets WCAG contrast requirements, use a dedicated contrast checker before shipping it.
What does "Copy as CSS variables" do?
Copies all five colors as a ready-to-paste :root { --color-1:
...; } block, so you can drop a palette straight into a
stylesheet without retyping hex codes by hand.