HSL Color Picker
Color
A slider-driven picker for HSL — the color model most CSS designers think in. Each rail visualizes what the slider varies along, so it's easy to see what saturation 0 looks like at your current hue, or how lightness flips between black, your color, and white. Output is offered in HEX (with optional 8-digit alpha), `rgb()` / `rgba()`, `hsl()` / `hsla()`, and a Tailwind arbitrary-value wrapper.
- HEX#209FDF
- RGBrgb(32, 159, 223)
- HSLhsl(200, 75%, 50%)
- Tailwind[color:#209fdf]
How to use
- Drag the sliders. The big preview panel reflects the current color; a checkerboard shows through when alpha is below 100%.
- Hit Random for inspiration — it picks reasonable saturation and lightness, not full-bright neon.
- Copy whichever output format you need into your CSS or Tailwind utility class.
Frequently asked questions
- Why HSL instead of RGB?
- HSL maps onto how designers usually think: hue (which color), saturation (how vivid), lightness (how bright). To tweak just one axis — "same color, a bit darker" — you only move one slider. The same change in RGB requires touching all three channels.
- What does the 8-digit HEX mean?
- When alpha drops below 100%, the HEX output extends to `#RRGGBBAA`. The last two hex digits encode the alpha channel (00 = transparent, FF = opaque). Modern browsers and design tools all support this form.
- Why is lightness 50, not 100, the most saturated point?
- In HSL, lightness 0% is pure black and lightness 100% is pure white — both kill saturation. The most saturated rendering of any hue sits at 50% lightness.
Related tools
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.