Color Palette Generator
Free online color palette generator. Create harmonious color schemes with complementary, analogous, triadic, and monochromatic modes. Export as CSS, Tailwind, JSON, SCSS, or PNG. No signup required.
How to Use the Color Palette Generator
Choose a base color using the color picker or hex input, then select a color harmony mode — Complementary, Analogous, Triadic, Split-Complementary, Tetradic, Monochromatic, or Shades. The palette updates instantly. Press Space or click Shuffle to generate a random palette with golden-angle distribution. Lock individual swatches to keep them fixed during shuffle. Drag swatches to reorder. Click any swatch to edit it with a color picker and HSL sliders. Export your palette as CSS custom properties, Tailwind config, JSON, SCSS variables, or a PNG image. Save palettes to your browser for later use, or share a permalink URL.
About This Tool
Generate harmonious color palettes using standard color theory relationships — complementary (180° opposite), analogous (±30°), triadic (120° apart), split-complementary (150°/210°), tetradic (90° apart), monochromatic (same hue, varied lightness), and shades (same hue and saturation, decreasing lightness). The random shuffle uses the golden angle (~137.5°) for evenly distributed hues. All color math runs in your browser — nothing is sent to any server. Pair with the Contrast Checker to verify accessibility, or the Color Converter to get HEX, RGB, and HSL values.
Quick Reference Table
| Harmony | Hue Offsets | Colors |
|---|---|---|
| Complementary | 0°, 180° | 2 |
| Analogous | -30°, 0°, +30° | 3 |
| Triadic | 0°, 120°, 240° | 3 |
| Split-Complementary | 0°, 150°, 210° | 3 |
| Tetradic | 0°, 90°, 180°, 270° | 4 |
| Monochromatic | Same hue, varied L | 5 |
| Shades | Same hue & S, decreasing L | 5 |
Frequently Asked Questions
What is the golden angle used for random palettes?
The golden angle is approximately 137.5°. When hues are spaced by this angle, they produce maximally distributed colors around the color wheel, avoiding clusters and ensuring visual variety. It is the same principle that governs sunflower seed patterns.
Can I lock some colors and shuffle the rest?
Yes. Click the lock icon on any swatch to keep it fixed. When you shuffle, only unlocked swatches change. This is useful for building around a brand color.
What export formats are available?
CSS custom properties, Tailwind color config, JSON array, SCSS variables, and PNG image. Each format copies to your clipboard or downloads as a file.
Are my palettes saved?
Saved palettes are stored in your browser’s localStorage. They persist across sessions on the same device but are not synced between devices. Up to 20 palettes can be saved.
Is any data sent to a server?
No. All color calculations, exports, and saved palettes are handled entirely in your browser. Nothing is transmitted to any server.