HSL Color Wheel

Explore the geometry of digital HSL colors on a downloadable wheel. Hue runs around the circle, saturation runs from its center to the edge, and the lightness setting applies to the entire disk. A small outlined marker locates the selected color and its HEX result.

How to use this tool

1. Choose the wheel lightness between 0 and 100 percent.
2. Set the hue in degrees and saturation in percent.
3. Read the selected HEX value and inspect the marker.
4. Download the PNG to keep a visual reference.

Formula

Hue = clockwise angle from the right; saturation = distance from center ÷ radius ×100%; lightness = chosen constant

The selected HSL color is converted to sRGB and rounded to integer channels from 0 to 255, with exact half-byte ties rounded upward. The wheel is 320 × 320 pixels with a transparent area outside its disk. Its neutral center is gray at intermediate lightness.

Example

At lightness 50% and saturation 100%, hue 0° gives #FF0000, 120° gives #00FF00, and 240° gives #0000FF. At saturation 0%, every hue gives the same gray #808080 after 8-bit rounding.

Hue direction

This wheel places red to the right and increases hue clockwise. Rotating the whole diagram would change its appearance without changing the relationships between colors. HSL spacing is not a scale of equal visual difference or brightness.