CanDoYa
All tools
Saved toolsYour favorites

Add to favorites

Saved in this browser only.
Private browser utility / Color & Design

Color Harmony Wheel

Runs entirely in your browser - no upload, no sign-up.

Live workspaceLocal processing

Choose a base color, then compare exact hue relationships on the wheel.

Click or drag anywhere on the wheel to change hue and saturation.

Harmony rule
Harmony colorsComplementary
0° from basehsl(350 75% 64%)rgb(232, 93, 117)
+180° from basehsl(170 75% 64%)rgb(93, 232, 208)
Share this tool
color harmony wheel / browser utility
01 / Overview

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.

02

How to use

  1. 01
    Choose a base color

    Enter a HEX value, use the color picker, or click a point on the wheel.

  2. 02
    Select a harmony

    Compare complementary, analogous, split-complementary, triadic, tetradic, and square geometry.

  3. 03
    Tune the palette

    Adjust saturation and lightness while the wheel markers and color values update live.

  4. 04
    Export the result

    Copy an individual HEX value, copy the full CSS block, or download it as a CSS file.

03

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.

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.

FAQ

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.