LAB to HSL Converter
Enter L*, a*, b* values and instantly get the HSL color with hue, saturation, and lightness, plus a live swatch.
CIE L*a*b* Input
Reverse: pick a color to populate LAB
Choose any color — its LAB values will fill the fields above.
HSL Output
hsl(9, 100%, 50%)
One or more channels were clamped to fit the sRGB gamut. The displayed color is the nearest renderable approximation.
H
9
Hue °
S
100
Saturation %
L
50
Lightness %
Summary
Enter L*, a*, b* values and instantly get the HSL color with hue, saturation, and lightness, plus a live swatch.
How it works
- Enter the L* value (0–100) for lightness.
- Enter the a* value (roughly −128 to +127) for the green–red axis.
- Enter the b* value (roughly −128 to +127) for the blue–yellow axis.
- The HSL values and color swatch update automatically.
- Click Copy HSL to copy the CSS-ready hsl() string to your clipboard.
- Use the color picker to reverse-engineer LAB values from any color.
Use cases
- Translate brand LAB color specifications into CSS HSL values.
- Convert print color values into screen-friendly HSL for web styling.
- Verify color accuracy when bridging design tools that output LAB.
- Generate HSL swatches for design systems from LAB palettes.
- Adjust hue, saturation, and lightness numerically from a LAB starting point.
- Cross-check LAB-to-HSL conversions in image-processing pipelines.
- Quickly prototype color variations by tweaking L*, a*, b* and observing HSL shifts.
- Convert accessible color specifications (often defined in LAB) to CSS-native HSL.
Frequently Asked Questions
Last updated: 2026-07-01 ·
Reviewed by Nham Vu