Interactive HSL Color Wheel Online — Free
Runs 100% in your browser — your files never leave your device.
An HSL wheel makes color relationships visible: angle selects hue, distance from the center controls saturation, and a separate slider adjusts lightness. Click, drag, use the keyboard, or enter a CSS color directly while HEX, RGB, and HSL outputs remain synchronized.
How it works
- 1
Choose hue and saturation
Click or drag around the wheel, or use arrow keys for precise movement.
- 2
Adjust lightness
Move the slider to preview tints and shades at the same hue.
- 3
Copy a color format
HEX, RGB, and HSL update together and each can be copied.
About this tool
What the wheel shows
The color wheel arranges every hue in a circle — red flowing through orange, yellow, green, cyan, blue, and purple back to red. Click any point to read its exact value and see its position on the wheel. It is the map that every color relationship — complements, splits, triads — is drawn on.
When to reach for it
Understand why a scheme works by seeing its geometry, teach or learn color relationships visually, find neighbor colors by eye instead of by degrees, and pick hues interactively when a slider feels too abstract. The wheel turns color theory from rules into a picture.
Reading relationships on the wheel
Opposite points are complements; triangles are triads; neighbors are analogous. Once you can read those distances, the scheme tools — triad, analogous, split-complementary — become shortcuts for geometry you already understand.
Frequently asked questions
Which color model does the wheel use?
The standard digital hue wheel: hue angle in HSL space, the same model CSS uses. Degrees on the wheel map directly to hue values you can paste anywhere.
Why does the artist's color wheel look different?
Paint-mixing wheels place red-green as complements; the digital wheel pairs red with cyan, because screens mix with light rather than pigment. Both are internally consistent — this is the one that matches screen work.
Can I copy the color I click?
Yes — every click shows the exact value in HEX, RGB, and HSL with one-click copy for each format.