Color Wheel
Pick a color visually from the wheel and read its values.
HEX#3077e8
RGBrgb(48, 119, 232)
HSLhsl(217, 80%, 55%)
Explore the Color Wheel
The color wheel arranges hues in a circle, making the relationships between colors visible. Drag around the wheel to choose a hue and saturation, adjust lightness, and read off the exact HEX, RGB, and HSL values.
How to read it
- Angle around the wheel = hue
- Distance from centre = saturation
- The lightness slider darkens or lightens
- Opposite sides are complementary colors
Why it's useful
Seeing hues in a circle makes it intuitive to find complementary (opposite), analogous (adjacent), and triadic (evenly spaced) relationships when building a palette.
Private & Processed Locally
Everything runs in your browser; nothing is uploaded.
Frequently Asked Questions
Common questions about the Color Wheel.
How do I use the color wheel?
Click around the wheel to set hue and saturation, then adjust lightness with the slider.
What do positions mean?
Angle is hue, distance from the centre is saturation, and the slider controls lightness.
Is it private?
Yes, everything runs in your browser.