Colors & design
Color Palette Generator
One color in, four ready-to-use harmonies out.
Complementary
Analogous
Triadic
Monochrome
You have one color — from a logo, a brand, a moment of inspiration — and you need a whole palette that works with it. Pick it with the color picker or paste its HEX code: the tool instantly computes four classic harmonies from color theory. Complementary for strong contrast, analogous for a soft, cohesive set, triadic for a lively, balanced composition, and monochrome for shades running from light to dark. Every swatch is clickable: one click copies the HEX code, ready to paste into your CSS, Figma or brand guidelines. Everything is calculated live in your browser, with no account and no limits.
How does it work?
- Pick your base color or paste a HEX code.
- The four harmonies are computed instantly.
- Compare complementary, analogous, triadic and monochrome schemes.
- Click any swatch to copy its HEX code.
Frequently asked questions
Which harmony works best for a website?
Analogous or monochrome for the overall mood, with the complementary color reserved for buttons and calls to action — contrast draws the eye exactly where you need it. Triadic suits more expressive, illustrated or playful brands.
How are these harmonies calculated?
By rotating the hue around the color wheel (in HSL space): the complementary sits at 180°, analogous colors at ±30°, triadic at ±120°. Monochrome varies lightness and saturation while keeping the hue constant.
How many colors does a website palette need?
In practice: one primary color, one accent for actions, and three to five neutral shades for backgrounds and text. Too many vivid colors dilute the visual hierarchy — restraint is your friend.