Color Palette Generator

Build harmonious colour schemes — complementary, analogous, triadic, monochromatic. Export as CSS, Tailwind, JSON, SCSS, or PNG.

Jump to section

Ad · responsive

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 convert HEX to RGB to get the values you need for CSS, Figma, or brand guides.

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.

Created by The Toobits Team · Engineering & Editorial

Toobits is built, tested, and maintained by a small independent engineering team. Every tool is written in TypeScript, runs entirely in the browser, and is reviewed against its source formulas before publication.

Editorial policy · Updated April 2026

Ad · responsive