Pick a base color and get a harmonious palette in a click — complementary, analogous, triadic and more. Copy any hex or download the whole set as CSS.
🔒 100% private — nothing is uploaded
#
Harmony
Complementary palette
Two colors opposite each other on the wheel — bold, high-contrast pairings.
Tip: click any swatch to copy its hex code.
How the palette generator works
Everything is computed live in your browser from color-wheel math — no accounts, no waiting, no data leaving your device.
1
Choose a base color
Use the color picker, type a hex code, or roll a random starting point.
2
Pick a harmony
Complementary, analogous, triadic, tetradic, monochromatic, shades or tints — each derives new colors from your base.
3
Copy or download
Click a swatch to copy its hex, grab them all at once, or export the palette as CSS custom properties.
What the harmonies mean
The generator converts your base color to HSL (hue, saturation, lightness)
and rotates the hue around the 360° color wheel to build each scheme.
Complementary uses the opposite hue (+180°) for maximum contrast.
Analogous nudges the hue ±30° for calm, cohesive sets.
Triadic spaces three hues 120° apart, and tetradic uses
four hues 90° apart for rich, balanced schemes.
Monochromatic keeps the hue fixed and varies saturation and lightness.
Shades darken your color toward black, while tints
lighten it toward white — both are perfect for building UI scales and hover states.
🔒
Private by design. Every color is calculated right here in your browser with plain JavaScript. Nothing is ever uploaded or stored — we never see your palette.
Frequently Asked Questions
What color harmonies can I generate?▼
Seven schemes from any base color: complementary, analogous, triadic, tetradic, monochromatic, shades and tints. Switching between them instantly rebuilds the palette.
What's the difference between shades and tints?▼
Shades step your color down toward black, which is great for depth and darker UI states. Tints step it up toward white, ideal for soft backgrounds and highlights.
How are the harmonies calculated?▼
Your base color is converted to hue, saturation and lightness, then the hue is rotated around the color wheel — for example +180° for complementary or 120° apart for triadic — to derive the matching colors.
How do I set the base color?▼
Use the color picker, type a 3- or 6-digit hex code, or hit Random to roll a fresh starting point. The palette updates the moment the base changes.
Can I export the whole palette?▼
Yes. Click any swatch to copy its hex, use Copy all hex to grab the full set, or Download CSS to export the palette as ready-to-use CSS custom properties.
Is my data uploaded anywhere?▼
No. Every color is calculated right here in your browser. Nothing is ever uploaded or stored — we never see your palette.