Color Palette Generator
Pick a seed color and instantly generate complementary, analogous, triadic, and monochromatic palettes. Click any swatch to copy its hex code.
Color Harmony Theory
| Harmony | Hue Difference | Best For |
|---|---|---|
| Complementary | 180° | High-contrast UI, logos, CTAs |
| Analogous | 30° | Natural, calm, cohesive designs |
| Triadic | 120° | Vibrant, playful, balanced designs |
| Split-Compl. | 150° | Softer contrast than complementary |
| Monochromatic | 0° (varied L) | Elegant, professional, minimal |
| Shades | 0° (varied L+S) | Component states, hover effects |
Frequently Asked Questions
Complementary colors are opposite on the color wheel — 180° apart in hue. They create maximum contrast and visual tension. Examples: red & cyan, blue & orange, purple & yellow.
Analogous colors sit next to each other on the color wheel (30° apart). They look harmonious and natural — like blue, blue-green, and green. Ideal for calm, serene designs.
Click any swatch to copy its hex code. Paste it directly into CSS:
color: #6366f1; or set as a CSS variable: :root { --primary: #6366f1; }.60% dominant color (backgrounds, large areas), 30% secondary color (sidebars, cards), 10% accent color (CTAs, highlights). From your palette: use the muted shade at 60%, mid-tone at 30%, and the vivid color at 10%.