How to use the Color Harmony Wheel
- Choose a wheel. Painter’s RYB wheel follows the red–yellow–blue circle taught in art classes and used for mixing paint. Digital RGB wheel is the hue circle your screen and design software use. Switching keeps your base color and simply shows where it sits on the other wheel.
- Pick a harmony. Complementary, Split-complementary, Analogous, Triadic, Tetradic (rectangle), Square or Monochromatic. Lines from the center show where each color of the scheme sits.
- Move the base color. Drag the large handle around the wheel to change hue and toward the center to soften it; dragging any smaller handle rotates the whole scheme with it. Or type a HEX into Base color. On a keyboard, focus the wheel and use ← → to rotate (hold Shift for 15° jumps) and ↑ ↓ for saturation.
- Set saturation and lightness. The sliders apply to the whole scheme, and the wheel redraws at the chosen lightness so it always shows the colors you will actually get.
- Take the colors with you. Copy a single swatch or Copy HEX list for all of them, Download PNG for a card with the wheel and swatches, or Open in Palette Generator to lock and refine the set.
Why the painter’s wheel gives different complements
Ask a painter for the complement of red and you’ll hear “green”. Ask a screen and you’ll get cyan: on the RGB hue circle, #FF0000 sits opposite #00FFFF. Both answers are right, for different systems. Screens build color from red, green and blue light, so the RGB wheel spaces those three evenly at 0°, 120° and 240°. Traditional color theory — the circle in Johannes Itten’s Bauhaus teaching and most art-class wheels since — uses red, yellow and blue as primaries and spaces those evenly.
The difference is mostly in how much room each family gets. On the RGB wheel, everything from red to yellow — all the oranges — fits into 60°. On the painter’s wheel it fills 120°, because painters care a great deal about the oranges, earths and skin tones in that range. To make that happen, this wheel uses a piecewise remap between the two: painter’s angle 0° is red (hue 0°), 60° is orange (hue 30°), 120° is yellow (hue 60°), 180° is green (hue 120°), 240° is blue (hue 230°) and 300° is violet (hue 280°), with straight-line steps in between.
The result is the set of opposites you know from the paint box:
| Base | Complement on the RYB wheel | Complement on the RGB wheel |
|---|---|---|
Red #FF0000 |
Green #00FF00 |
Cyan #00FFFF |
Yellow #FFFF00 |
Violet #AA00FF |
Blue #0000FF |
| Blue (hue 230°) | Orange (hue 30°) | Golden yellow (hue 50°) |
Use the RYB wheel when you plan a painting, mix physical paint or want the classic “red and green, blue and orange, yellow and violet” contrasts. Use the RGB wheel when you match a digital design system or when a developer expects hue values to agree with CSS hsl().
The seven harmonies, measured
| Harmony | Angles from the base | Colors | Character |
|---|---|---|---|
| Complementary | 0°, 180° | 2 | Maximum hue contrast; one should dominate |
| Split-complementary | 0°, 150°, 210° | 3 | Lively, less tense than straight complements |
| Analogous | −30°, 0°, +30° | 3 | Calm and unified; needs value contrast |
| Triadic | 0°, 120°, 240° | 3 | Balanced and bright; on the RYB wheel, red gives the classic red–yellow–blue |
| Tetradic (rectangle) | 0°, 60°, 180°, 240° | 4 | Two complementary pairs; lots of options |
| Square | 0°, 90°, 180°, 270° | 4 | Boldest; mute three of the four |
| Monochromatic | One hue, five values | 5 | Contrast comes only from light and dark |
All angles are measured on whichever wheel you are viewing, so a triadic scheme on the RYB wheel is a different set of colors from a triadic scheme on the RGB wheel. Monochromatic spreads five values 16 percentage points of lightness apart and slides the window up or down when your base is very light or very dark.
Tips from practice
Harmony picks hues; you still pick proportions. A triad used in equal thirds usually looks like a flag. Give one hue most of the canvas, a second hue a supporting role, and keep the third for small accents.
Pull the handles toward the center for real-world palettes. Fully saturated schemes look exciting on the wheel and garish in a painting. Most convincing landscapes and portraits are built from muted versions of their hues, with only the focal point pushed to full strength.
Use complements to neutralize, not just to contrast. On the painter’s wheel, a touch of a color’s complement grays it down. A green that is too loud for foliage calms down with a little red — far more naturally than with black.
Mind the value of your accent. Two hues can be perfect opposites and still disappear into each other if they share the same lightness. Lower the Lightness slider for one of them in your final palette, or test the pair in the Contrast Checker.
Turn a scheme into a full palette. A harmony gives you three or four hues; a working palette also needs darks, lights and neutrals. Send the scheme to the Color Palette Generator, lock the hues and let it fill in the rest.