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.
The color palette generator creates harmonic combinations from a base color: complementary, analogous, triadic and a scale of shades and tints. It's ideal for designers, developers and content creators who need a coherent palette for a website, a brand, a presentation or an illustration. Adjust the base color and the palette updates instantly; click any swatch to copy its HEX code and use it in your CSS, Figma or favorite editor. Generating palettes with color theory saves you hours of trial and error and guarantees visually balanced results. All palette generation runs in your browser, free and with no sign-up, sending nothing to any server.
Features
- ✓Complementary
- ✓Analogous
- ✓Triadic
- ✓Light to dark shades
- ✓Copy HEX
- ✓100% in browser
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>