HSL Color Picker
HSL (Hue, Saturation, Lightness) is the most intuitive color model for humans. Adjust the hue, saturation, and lightness to find your perfect color.
#2ecc71
rgb(46, 204, 113)
hsl(145, 63%, 49%)
oklch(0.746 0.181 152.3)
cmyk(77%, 0%, 45%, 20%)
Use Cases
Creating color variations (lighter/darker shades)
Building consistent color systems
Generating monochromatic palettes
CSS custom properties and theming
Tips
HSL is the easiest model for creating shades — just change Lightness
Hue 0/360 = red, 120 = green, 240 = blue
Saturation 0% = gray, 100% = pure color
FAQ
What is the HSL color model?
HSL stands for Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%). It's designed to be intuitive for humans.
How is HSL different from RGB?
RGB defines colors by mixing red, green, and blue light. HSL defines colors by their perceptual properties — hue, saturation, and lightness.
How do I make a color lighter in HSL?
Increase the lightness value. hsl(200, 80%, 50%) becomes lighter at hsl(200, 80%, 70%).
How do I create a gray in HSL?
Set saturation to 0%. hsl(0, 0%, 50%) is medium gray.