Color Wheel

This tool renders a 360-segment hue ring on an HTML canvas and lets you pick a hue by clicking or dragging on the ring. Saturation and lightness are set via sliders, and the selected color is shown as a swatch with copyable HEX, RGB, and HSL strings. A Reset button restores hue 0, saturation 100, lightness 50.

1. Click or drag inside the colored ring to set the hue; the ring is drawn at the current saturation and lightness. 2. Adjust Hue (0-360), Saturation (0-100), and Lightness (0-100) with the sliders or numeric inputs. 3. Watch the Preview swatch and the indicator on the ring update live. 4. Copy HEX, RGB, or HSL using the buttons in the Color Values card. 5. Click Reset to return to the defaults.

The wheel is a 260px canvas drawn at device pixel ratio for crispness, with an outer hue ring and an empty center. Pointer events are captured so dragging tracks the cursor; clicks inside the inner hole or outside the outer edge are ignored. A circular indicator sits at the selected hue and is filled with the current color. Hue is derived from the pointer angle relative to center, with 0deg at the top. Saturation and lightness change the colors of every ring segment, not the geometry.