Color wheel: complementary, triadic and analogous colors
Choose a base color and a harmony to see matching colors drawn on a 36-segment hue wheel, with hex codes for each. Tap a segment to move the hue. The starting plum #7B3F8C pairs with a green complement, #508C3F.
- #7B3F8C
- #508C3F
Tap a segment of the wheel to move the base hue. The wheel keeps your color's saturation and lightness.
On this page
A color wheel arranges hues in a circle so that relationships become geometry. Colors across from each other contrast, colors side by side blend, and colors spaced evenly make a balanced set. This page puts that idea into a tool you can click.
What the wheel does
The ring has 36 segments, each covering 10° of hue. The center circle shows your base color, and dots on the ring mark the harmony: a dashed outline joins them when there are several. You have two inputs. Base color takes a hex code or a picker value, and Harmony offers five choices. The chips beside the wheel list the resulting colors with hex codes.
Clicking a segment moves the base color to that hue while keeping its saturation and lightness, so you can sweep around the wheel and watch the harmony follow. The wheel itself draws its segments at a middle saturation and lightness, so the ring may not match your color exactly even where the dot is in the right place.
The five harmonies
- Complementary: the opposite hue, two colors, with the most contrast.
- Analogous: the base plus its two neighbors, 30° either side, which feels calm.
- Triadic: three hues 120° apart, lively but balanced.
- Split complementary: the base plus the two colors on either side of its opposite, with less tension than a plain complement.
- Tetradic (square): four hues 90° apart, which is rich but easy to overdo.
The wheel uses the HSL hue circle that CSS and most design tools use. It is not the red-yellow-blue wheel from art class, so its opposites differ: red's opposite here is cyan, not green. For paint-style blending, use the color mixer.
Worked example
You are designing a poster for a school bake sale, with a teal headline color, #2A9D8F. On the triadic setting the wheel suggests #8F2A9D (a purple) and #9D8F2A (a mustard). The analogous setting gives #2A9D56 (green) and #2A729D (blue). Complementary gives #9D2A38, a deep red. For the poster, use the red for price tags and a border: white text on it measures 7.44:1. Avoid white on the teal itself, which gives only 3.32:1; use black, at 6.31:1, or keep the teal for large shapes only. Mustard needs black text as well, at 6.39:1.
Using a harmony well
A harmony tells you which hues to use, not how much of each. Let one color dominate, use a second for about a third of the space, and keep the third for small accents. The color palette generator can turn a harmony into five usable colors, including pale and dark ones, and the shade and tint generator can soften any pick that is too intense.