TXT · Text & Data tools

HEX to HSL Converter

Active color#000000
Hex Input
HSL Output
1Active Line0Valid Items
Go To Full Color Converter

HEX to HSL conversion

Paste your hex codes into the input pane. The tool accepts both 6-digit (#RRGGBB) and 3-digit (#FFF) shorthand forms, returning standard CSS hsl() strings. The underlying algorithm maps the base-16 RGB channels to their corresponding hue (0–360°), saturation (0–100%), and lightness (0–100%).

Active color tracking

The visual color picker synchronizes with your cursor position. Clicking a line in the input pane updates the picker to preview that specific color. Dragging a new value in the picker automatically overwrites the active line with the updated hex string.

Batch list processing

The tool processes multiple colors simultaneously. Paste a list of hex values, one per line, to convert an entire palette at once. The output pane mirrors your line breaks, generating a matching list of HSL values that can be copied directly to your clipboard.

Frequently Asked Questions

Six-digit codes like #22D3EE and 3-digit shorthand like #fff, which expands to #ffffff. Paste one color per line for batch conversion.

CSS hsl(h, s%, l%), where hue is in degrees (0–360) and saturation and lightness are percentages (0–100%). Example: hsl(188, 86%, 53%).

Hue is rounded to whole degrees and saturation and lightness to whole percentages, so converting back to hex can shift the result by one step. This is normal.

When the three channels are equal the color is gray: saturation is 0% and the hue value has no visual effect.

No.

Try one of our format-specific converters below

Full Color Converter tool

Explore Our Tools

Browse all tools