About this tool
Color harmonies are hue relationships picked straight off the color wheel: complementary pairs two opposite hues for maximum contrast and punch, analogous groups three neighboring hues for a calm, cohesive feel, triadic spaces three hues evenly apart for a vibrant look that still stays balanced, tetradic spaces four hues evenly apart for a rich palette that takes more care to balance, and split-complementary swaps the single true complement for the two hues beside it — most of the contrast of a complementary scheme with less visual tension.
Pick a base color, choose a scheme, and this tool computes every other hue at the same saturation and lightness so the set reads as one family. Each swatch shows its exact hsl() value and copies it to your clipboard on click — drop it straight into CSS. Everything runs locally in your browser; nothing is uploaded, and your base color and last scheme are remembered for next time.
Frequently asked questions
Which harmony scheme should I use for a website?
Analogous schemes tend to look calm and cohesive for content sites, while complementary or split-complementary schemes create stronger contrast for calls-to-action — try a few and see what fits your brand.
Does this account for color accessibility/contrast?
No — the schemes are pure hue math, not contrast-checked. Always verify text/background pairs against WCAG contrast ratios separately before shipping.