Generate Beautiful Palettes

Pick any color. Get complementary, analogous, triadic, and more — with CSS variables ready to copy.

Base color + its opposite on the wheel, plus light tints of each.

5 neighboring hues sitting next to each other on the color wheel — naturally harmonious.

3 colors evenly spaced 120° apart — vibrant and balanced.

Base + two colors adjacent to its complement — softer contrast than complementary.

4 colors forming a rectangle on the wheel — rich, complex palettes.

9 lightness steps of the same hue, from near-black to near-white.

🎨

Complementary, analogous, triadic, split-complementary, tetradic, and shades — all based on classic color theory.

📦

Copy your palette as CSS variables, Python class, JavaScript, TypeScript, Dart/Flutter, Swift, Kotlin, or raw JSON.

♿

Use the Contrast tool to verify WCAG AA/AAA compliance for any color pair.