An interactive color wheel with harmony overlays. Set hue, saturation and lightness, then project complementary, analogous, triadic, tetradic or split-complementary markers onto the wheel to see exactly where each scheme sits — with every harmony exportable as hex values.
Settings
Generated locally in your browser — your settings and results never leave this page.
The oldest diagram in color, made interactive
Color wheels predate color science — Newton bent the spectrum into a circle in 1704 — yet the circle remains the most legible map of hue relationships ever drawn. This wheel is the HSL hue circle rendered live at your chosen saturation and lightness, with harmony geometries projected onto it as markers. It is the diagram from every design book, except the angles are real, the colors are yours, and every position is copyable.
Using the wheel as an explanation device
The wheel’s superpower is communication. “These sit 120° apart” with three dots on a circle convinces stakeholders in a way swatches alone never do — geometry reads as rationale. Overlay the harmony behind your palette, screenshot it, and the design review has its diagram. The harmonies output lists every scheme’s hex values for the follow-up questions.
What the S and L sliders teach
Sliding lightness or saturation transforms the entire ring, and the lesson is worth the price of admission: a “hue” is a family, not a color. At L 90% every family is a pastel; at L 25% everything is heritage-deep; at S 20% the wheel nearly vanishes into gray. The wheel at multiple slider positions is the fastest intuition-builder for the three-axis structure of color.
Wheel trivia with practical edges
This is the additive RGB/HSL wheel — red opposes cyan. Painters’ RYB wheels oppose red and green, so pigment-trained intuitions land one notch off here. And the wheel’s twelve landmark stops (every 30°) are exactly the classic twelve-hue circle — primaries, secondaries, tertiaries — which is why the analogous scheme’s ±30° means “immediate neighbors” in both systems.
The twelve stops, as values
The wheel’s twelve landmarks at full saturation and half lightness — the classical hue circle in copyable form:
| Angle | Hue name | HEX |
|---|---|---|
| 0° | red | #ff0000 |
| 30° | orange | #ff8000 |
| 60° | yellow | #ffff00 |
| 90° | chartreuse | #80ff00 |
| 120° | green | #00ff00 |
| 150° | spring | #00ff80 |
| 180° | cyan | #00ffff |
| 210° | azure | #0080ff |
| 240° | blue | #0000ff |
| 270° | violet | #8000ff |
| 300° | magenta | #ff00ff |
| 330° | rose | #ff0080 |
Every harmony this page overlays is arithmetic on these angles — complements differ by 180, triads by 120, analogous neighbors by 30. Keeping even four of the twelve anchor hexes in memory (red f00, green 0f0, blue 00f, and 30° orange ff8000) is enough to estimate any harmony’s colors before the tool confirms them.
How to use the Color Wheel
- Set hue with the big slider – the marker walks the wheel.
- Adjust saturation and lightness for the whole wheel.
- Overlay a harmony to see its geometry on the wheel.
- Copy the selected color or all harmony sets.
Frequently asked questions
What am I actually looking at on this wheel?
The HSL hue circle rendered at your chosen saturation and lightness: twelve 30° stops blended around the ring. The dots mark your color and its harmony partners at their true angles – the geometry diagrams in design books, but live and copyable.
Why do painters' wheels put complements differently?
The traditional artists' wheel (RYB pigment) places red opposite green; the light-based RGB/HSL wheel places red opposite cyan. Both are self-consistent systems – this tool is the light wheel, correct for screens. Expect old paint-mixing intuitions to land one notch off.
What are the 30° stops – do colors between them exist?
The ring is continuous; the twelve stops are landmarks (the classic twelve-hue wheel). Your hue slider moves in 1° steps, so all 360 positions are selectable – the stops just make the geometry readable.
How do I use the wheel to explain a palette decision?
Overlay the harmony you used and screenshot it: "these three sit 120° apart" is instantly legible even to non-designers. The angles turn taste into geometry, which is easier to defend in reviews.
Why does the whole wheel change when I move lightness?
Because the wheel shows the hue circle at that lightness slice of the HSL cylinder. At 90% lightness every hue is pastel; at 20% everything is deep. It is a reminder that a "hue" is really a family of colors.
Which harmony overlay has the most members?
Tetradic – four points at 90° spacing (two complementary pairs). It is also the hardest to balance in practice, which the Tetradic Palette Generator's guidance addresses.
Can I jump from the wheel to a full palette?
Every harmony line in the output lists its hex values, and the harmony palette generators (linked below the tool) turn any of them into an export-ready set with tints.
