🎨 HSL Color Picker

Pick a color and get HSL / RGB / HEX simultaneously, plus shades and harmony schemes.

Color

hsl(220, 100%, 50%)

Hue220°

Saturation100%

Lightness50%

HSLhsl(220, 100%, 50%)

RGBrgb(0, 84, 255)

HEX#0054ff

CMYKcmyk(100, 67, 0, 0)

CSSbackground: hsl(220 100% 50%)

Click a swatch to pick it

Color A#0054ff

Color B#ff0054

Mix ratio50% A / 50% B

#7f2a7f

Click any color to load it into the picker.