Color Wheel
The circular diagram that organizes hue and shows how colors relate to one another. Understanding its structure is the starting point for every color harmony.
Visual reference
Structure
The digital color wheel is essentially hue made visible. Every hue on the wheel is described by a single number — its angle — which makes color relationships easy to describe mathematically.
| Hue | Angle | Character |
|---|---|---|
| Red | 0° / 360° | Warm · Urgent · Attentive |
| Orange | 30° | Warm · Energetic |
| Yellow | 60° | Warm · Bright · Cheerful |
| Yellow-green | 90° | Fresh · Natural |
| Green | 120° | Cool · Balanced · Natural |
| Spring green | 150° | Fresh · Aquatic |
| Cyan | 180° | Cool · Clean · Technical |
| Azure | 210° | Cool · Calm |
| Blue | 240° | Cool · Trustworthy · Restful |
| Violet | 270° | Cool · Creative |
| Magenta | 300° | Warm-cool · Bold |
| Rose | 330° | Warm · Playful |
RYB vs RGB
Two wheels describe color, and they are not the same. The traditional RYB wheel (red-yellow-blue) is an art-school model that predates modern physics. The RGB/HSL wheel reflects how screens and eye physiology actually work — red, green and blue spaced evenly 120° apart.
| Model | Primaries | Used for |
|---|---|---|
| RYB | Red · Yellow · Blue | Traditional art, painting |
| RGB | Red · Green · Blue | Emissive screens, digital design |
| CMY | Cyan · Magenta · Yellow | Subtractive printing |
On this site we use the HSL/HSV wheel for describing hue angles, because it is what browsers and design tools use. When we say "complementary" of a hue at 210°, we mean the hue at 30°. That convention is consistent and easy to work with in code.
How to use the wheel
-
Find your base huePick a starting angle. This is your dominant color.
-
Choose a relationshipAdd complementary (180°), analogous (±30°) or triadic (120° / 240°) hues to build a harmony.
-
Vary lightness and saturationA palette is more than hue. Adjust lightness for tints and shades, and saturation for muted or vivid character.
-
Check contrastHarmony does not guarantee readability. Check that foreground and background pass WCAG AA (4.5:1 for body text).
Frequently asked questions
What is the color wheel?
The color wheel is a circular diagram that arranges hues by their position on the spectrum. It is used to visualize how colors relate — complementary, analogous, triadic, tetradic — and to help pick harmonious palettes.
How many colors are on the color wheel?
There is no single correct number. The classic 12-part wheel includes 3 primaries, 3 secondaries and 6 tertiaries. Modern digital wheels can show any number of hues — the HSL wheel commonly uses 360 positions, one for each degree.
Is the color wheel RYB or RGB?
Traditional art teaching uses the RYB (red-yellow-blue) wheel. Modern digital tools use RGB or the HSL equivalent, where red is at 0°, green at 120° and blue at 240°. The two wheels are different models of color and should not be mixed.
What is the color wheel used for?
The color wheel is used to choose harmonious combinations, find complements and accents, and reason about how a palette will feel. Designers and artists use it as a starting point, not a rule.