Tetradic · square · split
Color harmony generator
Go beyond basic complementary pairs: generate split-complementary, tetradic, square, or triadic sets from one base, with a CSS custom-properties block ready to paste into prototypes.
CSS custom properties
Why this tool exists
The standard palette generator stops at four harmony modes. Product marketing sometimes needs tetradic punch or square balance — this page covers those geometries explicitly.
How to use it
- Set a base color and pick a harmony mode.
- Copy individual HEX chips or the full CSS block below the swatches.
- Assign semantic roles (primary, accent, warning) in your token sheet — we do not auto-name them.
- Validate each pair in the contrast checker.
Use a different tool when…
You only need complementary — the palette generator is simpler for that.
Practical tips
- Tetradic is vibrant — mute two stops for enterprise UI.
- Square harmonies need one dominant hue; others become accents.
- Export CSS is a starting point, not a11y-approved tokens.
FAQ
How is this different from the palette generator?
This page adds tetradic and square modes plus the same CSS export pattern.
How many colors export?
Five stops per harmony, consistent with other ChromaXP harmony tools.
Can I save harmonies?
Copy CSS or HEX — nothing is stored server-side.
Which mode for dashboards?
Split or triadic with desaturated neutrals added manually.
OKLCH export?
HEX and CSS variables only; convert via color converter.