Color Wheel

How to use the color wheel

Click or drag anywhere on the disc to set a hue and saturation — position around the edge picks the hue, distance from the center picks the saturation. Use the Lightness slider underneath to move the same hue toward white or black without leaving the wheel, or type a hex code directly if you already have one. Then pick a rule from the Harmony dropdown: the wheel plots two to seven extra dots showing exactly where that harmony falls relative to your base color, and the row of swatches below lists each one as a hex code you can click to copy.

This is the same interactive color wheel tool designers have used for centuries to reason about color relationships, just computed live: every dot is exact HSL math, not a printed approximation.

Complementary, analogous, triadic — what each color harmony means

A complementary pair sits directly across the wheel — maximum contrast, useful for a single accent against a neutral base. Analogous colors sit next to each other and share a family feeling, which is why they're a safe choice for backgrounds and gradients. Split-complementary keeps that same high contrast but swaps the single opposite color for the two hues beside it, which is usually easier to balance than a straight complementary pair. Triadic and square harmonies space three or four colors evenly around the wheel for palettes that feel vibrant without clashing, and tetradic pairs two complementary pairs for a richer, four-color scheme. If none of the six quite fit, the Rainbow option spaces colors evenly all the way around for a full spectrum sweep.

Color wheel use cases

• Learning color theory — see complementary, analogous and triadic relationships plotted instead of memorized.
• Choosing an accent color — find a hue directly opposite your brand color for the highest possible contrast.
• Building a UI palette — pick a split-complementary or tetradic set for buttons, alerts and highlights that stay balanced.
• Painting and illustration — plan a limited palette the traditional way, before you touch a brush or a layer.

Once a harmony looks right on the wheel, take it further in the palette generator, which turns the same rules into a full palette plus an 11-step shade ramp, or open your base hue in the color picker for shades, tints and every conversion format at once. Pairing two of the wheel's colors as text and background? Check the result in the contrast checker before you commit to it.

Warm and cool colors on the wheel

One split the color wheel makes obvious is warm versus cool. Reds, oranges and yellows on one side feel active and advancing; greens, blues and purples on the other feel calm and receding. A palette that leans mostly one way with a single accent pulled from the opposite side is a reliable formula — a warm interface with one cool call-to-action, or the reverse. The wheel also shows why some complementary pairs feel harsher than others: a pure red and a pure green sit at exactly opposite points and visually vibrate against each other, while a slightly desaturated or lightness-shifted version of the same pair reads as balanced. Drag the base dot toward the center to lower saturation and watch every harmony soften along with it.

Common color wheel mistakes

A few things trip people up with a color wheel. First, screen color (RGB) and paint color (RYB) don't place hues in the same positions, so a complementary pair that looks right in a design tool won't match a physical paint chart exactly — the underlying theory holds, the angles shift. Second, a harmony rule gives you hues, not a finished palette: you still choose the lightness and saturation of each color, and that's where most of the visual balance actually comes from. Third, more colors isn't more interesting — a triadic or tetradic scheme with four equally-saturated hues usually needs two or three of them dialed back into supporting roles. Use the wheel to find the relationships, then refine each color in the color picker and pressure-test any text pairing in the contrast checker.

Color wheel FAQ