Hue220°
Saturation70%
Lightness55%
#3C71DD
Complementary
#3C71DD
#DDA73C
Triadic
#3C71DD
#DD3C71
#71DD3C
Analogous
#3CC2DD
#3C71DD
#573CDD
Split-complementary
#DD573C
#3C71DD
#C2DD3C
How to use
01
Drag the hue slider
Hue runs from 0 to 359 degrees. As you drag, the marker moves around the wheel and the main swatch updates in real time with its hex code beside it.
02
Tune saturation and lightness
The two lower sliders repaint the entire wheel at your chosen intensity, so the harmonies preview exactly as they'd render in your design, not at unrealistic full saturation.
03
Copy a harmony set
Each panel, Complementary, Triadic, Analogous, and Split-complementary, lists its swatches with hex codes and a Copy all button that grabs the whole group at once.
Why Color Wheel
- Interactive HSL color wheel with 4 harmony presets.
- Adjust hue/saturation/lightness, wheel and previews update live.
- Includes complementary, triadic, analogous, split-complementary.
Common questions
Do all the color wheel combinations update live?
Yes, four sets recompute on every slider move: complementary (180 degrees apart), triadic (120 degree spacing), analogous (30 degrees either side), and split-complementary (30 degrees either side of the opposite). Each panel shows swatches, hex codes, and a copy button.
How does the wheel find a complementary color?
It adds 180 degrees to your hue in HSL while keeping saturation and lightness identical. At hue 220 with 70 percent saturation and 55 percent lightness, that turns #3C71DD into #DDA73C, a warm gold opposite the blue.
Why does the whole color wheel change when I move lightness?
The wheel is rebuilt from 36 hue slices at your current saturation and lightness, not from a fixed rainbow. That's deliberate: harmonies judged at full intensity often look completely different at the values you'll really use.
Is this color wheel RGB-based or the traditional painter's wheel?
It uses the HSL model built on RGB, so red's opposite is cyan rather than the green a paint-mixing RYB wheel would give you. For screens this is the correct geometry, since it matches how monitors actually produce color.
Can I copy an entire wheel harmony at once?
Yes. Every harmony panel has a Copy all button that places its hex codes on your clipboard as a comma-separated list, ready for a stylesheet, a design token file, or a note to a teammate.
Does the wheel handle split-complementary combinations?
It does. The split-complementary panel takes your base hue plus the hues 150 and 210 degrees away, giving you complementary energy with less vibration when the two sides meet.
Where do warm and cool hues sit on this wheel?
Reds, oranges, and yellows occupy roughly 0 to 90 degrees, while blues and blue-greens fill the range around 180 to 270. Dragging the hue slider through those zones is the quickest way to feel the temperature shift.