Color Palette Generator
Generate five color harmonies (complementary, analogous, triadic, split-complementary, monochromatic) from any base color. Click any swatch to copy.
Complementary
Opposite colors on the wheel
Analogous
Adjacent colors
Triadic
Three evenly spaced
Split Complementary
Base + two adjacent to complement
Monochromatic
Same hue, varying lightness
infoColor Theory
Complementary: High contrast, bold. Great for CTAs.
Analogous: Harmonious, natural. Good for gradients.
Triadic: Vibrant, balanced. Use one dominant, two accent.
Split Complementary: Less tension than complementary. Versatile.
Monochromatic: Clean, elegant. Perfect for minimal design.
What is the Color Palette Generator?
A color palette generator builds related colors from a single base using rules from color theory. Complementary picks the opposite on the color wheel; analogous picks neighbors; triadic picks three evenly spaced. The five harmonies cover most design needs: high-contrast accents, calm backgrounds, brand systems, monochrome layouts.
How to use the Color Palette Generator
- 1
Pick a base color
Use the color picker, paste a HEX code, or hit Random for a fresh starting point. The five palettes regenerate instantly.
- 2
Compare the harmonies
Each card shows one harmony type with its colors as both a strip and individual swatches. Strip widths are equal so you can scan visual relationships at a glance.
- 3
Click any color to copy
Each swatch copies its HEX code on click. The label flashes "Copied!" so you know it worked.
- 4
Drop it into your design
Paste the HEX into Figma, your stylesheet, Tailwind config, or wherever your color tokens live.
Frequently Asked Questions
What color harmonies are generated?
Five: Complementary (180° opposite on the color wheel, high contrast), Analogous (the two neighbors on either side, calm and unified), Triadic (three evenly spaced 120° apart, vibrant and balanced), Split-Complementary (base plus the two colors adjacent to its complement, less harsh than full complementary), and Monochromatic (same hue at three lightness levels, clean and minimal).
How do I use a color palette?
Treat the first color as your dominant brand or background, the complement (or contrasting harmony color) as your accent for buttons and highlights, and the in-between colors as supporting text, borders, and hover states. The 60-30-10 rule is a good starting point: 60% dominant, 30% secondary, 10% accent.
Can I start from a HEX code?
Yes. Type or paste a six-digit HEX (with or without #) into the input next to the color picker. The five palettes regenerate the moment the HEX is valid. Random gives you a HEX you didn't pick yourself, useful when you're stuck for a starting point.