Color Harmony Generator
Generate complementary, analogous, triadic, or split-complementary palettes from one color.
A QUICK WALKTHROUGH
How to use this tool
- Choose a base color.
- Select a harmony relationship.
- Review the generated swatches and HEX values.
Defined hue model
The palette is generated in HSL. Complementary uses 0°/180°, analogous uses 0°/30°/330°, triadic uses 0°/120°/240°, and split complementary uses 0°/150°/210°. Saturation and lightness remain from the input.
Color space limitation
HSL hue rotation is a simple design rule, not a perceptual color model or a promise of equal visual spacing. Values are converted back to sRGB HEX for display.
Accessibility caveat
A harmony relationship does not guarantee readable contrast or accessible UI states. Check actual foreground/background pairs, typography, and interaction states.
GOOD TO KNOW
Common questions
Does it make a complete design system?
No. It produces a small hue-based palette from one input.
Are the swatches perceptually equal?
No. HSL rotation keeps numeric saturation and lightness, not perceived brightness.
Is the color uploaded?
No. Palette generation runs locally in the browser.