Loading page
Pick a seed color — or roll a random one — and every classic harmony scheme updates live: complementary, split complementary, analogous, triadic, square, rectangle, and monochromatic. Click any color to copy it, or copy a whole palette at once.
Drag the large handle to choose a hue and saturation. The small dots show its complementary and triadic harmony colors moving with it.
The seed plus its opposite — maximum hue contrast.
The seed with the two neighbors of its complement — contrast with less tension.
Neighbors on the hue wheel — harmonious and low contrast.
Three hues evenly spaced 120° apart — balanced and vivid.
Four hues evenly spaced 90° apart — rich but balanced.
Two complementary pairs (tetradic) — versatile four-color palettes.
One hue, five lightness steps — the safest palette for UI work.
Pick a mood and generate a matching 5-color palette. Export it as CSS, SCSS, Tailwind, JSON, or a PNG swatch strip.
Fully unconstrained — any hue, healthy saturation.
See it applied to a real interface before committing to it.
A live preview of this palette applied to real interface elements — buttons, cards, and text, not just a strip of color.
Feature card
Surface and accent colors, applied the way a real component would use them.
Read more →Every scheme is built by rotating the seed color's hue around the color wheel while keeping its saturation and lightness: complements sit 180° away, triads 120° apart, squares 90° apart, and analogous neighbors 30° to either side. Monochromatic palettes keep the hue fixed and step the lightness instead — the most reliable choice for tints and shades in interface design. Use the copy button on any card to grab the whole palette as a comma-separated list of hex values.