Color toolkit
Color wheel picker.
See harmony geometrically: the classic harmony positions on a hue wheel. Drag the wheel to rotate the base color and every marker follows.
Harmony wheel
Opposite hues, maximum contrast. Drag the wheel to rotate the base hue. Click a color to copy it.
Harmony
Resulting palette
Opposite hues, maximum contrast
Guide
What is a color wheel and how do harmony modes work?
The color wheel arranges hues in a circle that mirrors the visible spectrum: red through yellow, green and blue to violet, then back to red again. Colors directly opposite each other are complementary, colors sitting side by side are analogous, and evenly spaced groups form triadic or tetradic schemes. The color wheel picker on this page plots your base color on that circle and draws the exact marker positions for whichever harmony you choose.
Every harmony mode is simply a set of hue offsets from the base color. Complementary sits at 180 degrees, split-complementary at 150 and 210, triadic at 120 and 240, analogous steps 30 degrees either side, and tetradic lays a rectangle of four hues across the wheel. Because the relationships are geometric, you can see why a scheme feels balanced before you read a single hex value.
How to use the harmony wheel
Type a base color or press Random, then drag the wheel to rotate the base hue — every marker follows and the resulting palette updates live. Click any marker chip under the wheel to copy its hex value, switch harmony modes to compare them side by side, and save the palette you like to your library. The share button encodes both the color and the harmony in the URL.
Use the wheel when you want to choose colors visually rather than calculate them, then pair it with the palette generator for full shade and tint ramps and the contrast checker to confirm the combination is readable.
Frequently asked questions
- What is a color wheel used for?
- A color wheel makes hue relationships visible so you can build schemes — complementary, analogous, triadic — by geometry instead of memorizing color math. Swatchboard's wheel is interactive: drag it to rotate your base hue and the harmony markers follow instantly.
- Which color harmony should I pick?
- Pick complementary for high-energy contrast, split-complementary when you want contrast with less tension, analogous for calm and cohesive layouts, and triadic for balanced variety with three hues. Test your choice on text-heavy surfaces with the contrast checker.
- What is the difference between analogous and complementary colors?
- Complementary colors sit opposite each other on the wheel, for example blue and orange, and create the strongest possible contrast. Analogous colors sit next to each other, such as blue, blue-violet and violet, and blend softly with minimal visual friction.
- Does the color wheel work for accessible palettes?
- The wheel picks hues, but accessibility depends on lightness contrast. Generate the harmony, then check every text and surface pair with the WCAG contrast checker — 4.5:1 for normal body text and 3:1 for large text under WCAG AA.