---
title: "Color Harmony Wheel - Build Color Schemes | CanDoYa"
description: "Use an interactive color harmony wheel to create complementary, analogous, triadic, tetradic, split-complementary, and square color schemes."
url: https://candoya.com/tools/color-harmony-wheel/
locale: en
type: browser-tool
---

# Color Harmony Wheel

Category: Color & Design

## What is a color harmony wheel?

A color harmony wheel maps geometric relationships between hues so you can build a coordinated color scheme from one base color. Choose a harmony rule, then adjust hue, saturation, and lightness live. The wheel plots every result and gives you copyable HEX, RGB, HSL, and CSS values.

The wheel uses the sRGB HSL color model used by browsers. It runs locally with no image upload or account. Complementary colors sit opposite each other, while triadic and square schemes divide the hue circle into equal parts.

## How to use it

1. **Choose a base color** - Enter a HEX value, use the color picker, or click a point on the wheel.
2. **Select a harmony** - Compare complementary, analogous, split-complementary, triadic, tetradic, and square geometry.
3. **Tune the palette** - Adjust saturation and lightness while the wheel markers and color values update live.
4. **Export the result** - Copy an individual HEX value, copy the full CSS block, or download it as a CSS file.

## Who it's for

- **Interface designers** can establish a base, accent, and supporting colors before checking contrast.
- **Brand teams** can explore balanced alternatives around an approved core color.
- **Illustrators** can compare calm analogous schemes with more energetic complementary or triadic sets.
- **Front-end developers** can copy a finished harmony directly as CSS custom properties.

## Expert note

Tetradic and square are not the same rule here: tetradic uses two complementary pairs with alternating 60 and 120 degree gaps, while square uses four even 90 degree gaps. In either scheme, choose one dominant color instead of giving all four equal visual weight.

## Frequently asked questions

### Is this color harmony wheel free?

Yes. You can use every harmony rule, copy colors, and download CSS without signing up or paying. There is no usage limit because the color calculations run in your browser instead of on a metered server.

### Are my colors uploaded?

No. Your base color, wheel selection, and generated palette stay in your browser. CanDoYa does not need to upload an image or send your chosen colors to a processing service.

### What limits does the color wheel have?

The wheel works with opaque sRGB colors expressed as HEX, RGB, and HSL. It does not simulate paint mixing, spot inks, CMYK output, display gamut differences, or how colors look under changing physical light.

### How do complementary colors work?

Complementary colors sit 180 degrees apart on the hue circle. They create strong color contrast, but that does not guarantee readable text contrast. Check foreground and background pairs with a WCAG contrast checker before using them in an interface.

### What is the difference between analogous and triadic colors?

Analogous colors sit close together, here at 30 degrees on either side of the base, so they tend to feel related and calm. Triadic colors are 120 degrees apart, producing three distinct hues with more energy and separation.

### How are tetradic and square color schemes different?

Both use four colors. A tetradic rectangle combines two complementary pairs with unequal gaps, while a square places all four hues 90 degrees apart. The square is more evenly spaced; the rectangle gives you two closer hue relationships to develop.

### Can I use the generated colors in CSS?

Yes. Copy the CSS block or download it as a file. The export creates numbered custom properties such as --harmony-1 and --harmony-2, which you can rename to semantic tokens like --brand, --accent, or --surface.

## Related tools

- [Color Palette Generator](https://candoya.com/tools/color-palette-generator/)
- [Triadic Color Generator](https://candoya.com/tools/triadic-colors/)
- [Color Picker](https://candoya.com/tools/color-picker/)
- [Color Contrast Checker](https://candoya.com/tools/color-contrast-checker/)
- [HEX to HSL Converter](https://candoya.com/tools/hex-to-hsl/)

---

*Markdown edition of <https://candoya.com/tools/color-harmony-wheel/>, published for AI agents and other automated readers. Index of key pages: <https://candoya.com/llms.txt>.*