Color Palette Generator
Pick a base color and generate harmonic combinations: complementary, analogous, triadic and shades. Copy any HEX instantly.
Complementary
Analogous
Triadic
Shades (light→dark)
Built by
Miguel Ángel Colorado Marin (MACM)
Built by
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
How to generate a color palette?
- 1
Pick the base color
Use the color picker or type a HEX. The whole palette recalculates instantly.
- 2
Explore the combinations
You'll see complementary, analogous, triadic combinations and a scale of shades from lightest to darkest.
- 3
Copy the colors
Click any color to copy its HEX code to the clipboard.
- 4
Use them in your design
Paste the HEX into CSS, Figma, Tailwind or wherever you design.
Frequently asked questions
What is a complementary palette?
They are opposite colors on the color wheel (at 180°). They create maximum contrast and are used to highlight elements.
What's the difference between analogous and triadic?
Analogous are neighboring colors (±30°), harmonic and soft. Triadic are 120° apart, vibrant and balanced.
Is anything sent to a server?
No. All color math happens in your browser. Nothing is uploaded or stored.
In what format do I copy the colors?
In HEX (for example #7c3aed), the universal format compatible with CSS, Figma, Tailwind and any design tool.
Related tools
Embed Color Palette Generator on your site
Add Color Palette Generator to any web page with a simple iframe. Free, with attribution to miguelacm.es.
<iframe
src="https://miguelacm.es/embed/color-palette"
width="100%"
height="700"
frameborder="0"
title="Color Palette Generator — miguelacm.es"
></iframe>