Color Hues

Explore all hues around the 360° color wheel

The 360° Hue Spectrum

Hue is the pure color attribute — it's the angle on the color wheel measured in degrees from 0° to 360°. Red starts at 0°, green is at 120°, blue at 240°, and it wraps back to red at 360°. Drag the slider below to explore every hue.

Hue210°
#007FFF
Hue210°
HSLhsl(210, 100%, 50%)
Nearest NameAzure (210°)
Hex#007fff

Tints (Adding White)

Tints are created by increasing the lightness of a color — mixing it with white. In HSL, this means increasing the L value while keeping H and S constant.

Base (50%)
58%
66%
74%
82%
90%

Shades (Adding Black)

Shades are created by decreasing the lightness — mixing the color with black. In HSL, this means decreasing the L value.

Base (50%)
42%
34%
26%
18%
10%

Saturation Variants

Saturation controls the intensity or purity of the color. At 0% saturation, the color becomes a neutral grey. At 100%, it's the purest, most vivid version of that hue.

0%
17%
33%
50%
67%
83%
100%

← Desaturated (grey) — Fully saturated →

Named Hue Reference

Click a row to jump to that hue:

ColorNameHueHex
Red0°#ff0000
Vermilion15°#ff4000
Orange30°#ff8000
Amber45°#ffbf00
Yellow60°#ffff00
Lime75°#bfff00
Chartreuse90°#80ff00
Harlequin105°#40ff00
Green120°#00ff00
Emerald150°#00ff80
Spring Green160°#00ffaa
Cyan180°#00ffff
Cerulean195°#00bfff
Azure210°#007fff
Cobalt225°#0040ff
Blue240°#0000ff
Indigo260°#5500ff
Violet270°#7f00ff
Purple285°#bf00ff
Magenta300°#ff00ff
Pink330°#ff0080
Crimson348°#ff0033
🎨
HSL tip: When working with HSL, keeping the hue constant while varying saturation and lightness is the easiest way to create cohesive tonal palettes for your UI. Use hslToHex(hue, saturation, lightness).