Tool · Color Wheel

Color wheel.

Pick a color on the wheel, choose a harmony rule, drag the arms to fine-tune. Live palette + UI preview.

Anchor color
Harmony rule
Palette · 2 colorsOpen in generator ↗Visualize ↗
Tints & shades
Base
Arm 1
Live preview
New release
Design with confidence.
A harmonized palette for every surface - buttons, badges, backgrounds.
Feature 1
Short blurb here.
Feature 2
Short blurb here.
Feature 3
Short blurb here.

Choose a color harmony with an interactive color wheel

Start with a base color, then compare relationships such as complementary, split-complementary, analogous, triadic, tetradic, square, and monochromatic. The wheel gives you a structured way to explore hues around a starting point; it does not decide which colors should lead, recede, or carry meaning in your design. Use the live palette and preview to judge the result in context, then adjust the wheel arms until the combination fits the project.

Turn a harmony into a usable palette

Harmony rules are useful starting points for illustrations, brand explorations, and interface accents, but they do not ensure accessible text or balanced hierarchy. Assign roles to the colors - such as background, primary action, and highlight - and test foreground/background pairs with the color contrast checker before using the palette in production.

What is the color wheel?

A color wheel arranges hues in a circle so relationships between colors are visible: complementary colors sit opposite each other, analogous colors sit side by side, and triadic colors are spaced 120 degrees apart. This interactive color wheel lets you pick a base color and see each harmony with HEX codes.

How to use the color wheel

Drag the handle to choose a hue, then select a harmony. The wheel draws the related points and lists their HEX, RGB and HSL values below. Switch between the RGB wheel (used for screens, with red, green and blue as primaries) and the traditional RYB artist's wheel (red, yellow, blue) used in painting; the same harmony gives different results on each.

A 12-color wheel chart with names is available as a downloadable PNG for teaching and reference.

Color wheel harmonies explained

Complementary: two colors opposite each other, highest contrast, good for accents. Analogous: three neighbors, low contrast, calm. Triadic: three colors evenly spaced, vivid but balanced. Split complementary: a base plus the two neighbors of its complement, contrast without the tension. Tetradic: two complementary pairs, best with one color dominant. Monochromatic: one hue at several lightness levels.

Color Wheel FAQ

What is the opposite of blue on the color wheel?

Orange on the RGB wheel used for screens (blue #0000ff opposite yellow at #ffff00 in pure RGB terms, and orange on the artist's RYB wheel). The wheel here shows the exact complement for the blue you pick.

What are the 12 colors on the color wheel?

Three primaries (red, yellow, blue on the RYB wheel), three secondaries (orange, green, violet) and six tertiaries between them (red-orange, yellow-orange, yellow-green, blue-green, blue-violet, red-violet).

What is the difference between the RGB and RYB color wheel?

RGB is the additive model of light used by screens, with cyan, magenta and yellow as secondaries. RYB is the traditional subtractive painter's model. Complements differ between them: red's complement is cyan in RGB and green in RYB.

Who invented the color wheel?

Isaac Newton drew the first circular color diagram in 1666 after splitting light with a prism. Later wheels by Goethe, Itten and Munsell added the harmony rules used today.

Related color tools

Browse shades by color

Learn more