How it works
Choose a base color and a harmony rule, and a matching palette is built by rotating the hue around the color wheel or changing lightness. Tap any swatch to copy its code, or copy the whole set as CSS variables for your stylesheet.
Complementary = hue + 180° · Triadic = hue + 120° and + 240°
Harmony rules
- Complementary: opposite colors for strong contrast and call-to-action buttons.
- Analogous: neighbors on the wheel for calm, natural designs.
- Triadic and tetradic: three or four evenly spaced hues for lively, balanced palettes.
- Split complementary: the two neighbors of the opposite color — contrast with less tension.
- Monochromatic, tints and shades: one hue in several lightness steps, ideal for UI states.
Tips
- Use one color as the main tone, one as an accent and the rest sparingly.
- Check text and background pairs with the contrast checker before you publish.
- Everything runs in your browser; nothing is saved.
Standards and sources
- Harmonies are calculated on the HSL color wheel defined in CSS Color Module Level 4
Last reviewed October 7, 2026
Frequently asked questions
How do I make a color palette from one color?
Enter your base color and pick a harmony rule. The tool rotates the hue on the color wheel or changes lightness to build matching colors.
Which harmony is best for a website?
Analogous or monochromatic palettes feel calm and consistent; add one complementary color as an accent for buttons and links.
What are tints and shades?
Tints are lighter versions of a color and shades are darker ones. They are handy for hover states, borders and backgrounds.
Can I export the palette?
Yes. Copy the CSS variables block, or tap any swatch to copy a single HEX code.
Can it suggest a random palette?
Tap "Random base color" to start from a fresh color, then switch harmony rules to explore.