G
GamutDesk

HEX to HSL Code Converter

Convert hex color codes to cylindrical HSL (Hue, Saturation, Lightness) with visual degree meters and copyable CSS string.

100% Client-SideZero Data Collection
#2563EB
CSS HSL String
hsl(221, 83%, 53%)
Hue (H)221°
Saturation (S)83%
Lightness (L)53%

Technical Specification & Mathematical Principles

The HEX code is first parsed to normalized sRGB floats [0.0, 1.0]. Lightness is computed as L = (max + min) / 2.

If delta = max - min > 0, Saturation is calculated as S = delta / (1 - |2L - 1|), and Hue is determined by which RGB channel held the maximum value.

Frequently Asked Questions

HSL is intuitive for human cognition. Adjusting Lightness lets you easily create hover states (+5% lightness) and disabled variants (-20% saturation) without recalculating RGB channel mixes.

Related Design & Color Instruments

HEX to RGB Converter

Convert hexadecimal web color strings (#RRGGBB) to decimal integer rgb(r, g, b) tuples instantly.

Open Tool

RGB to HEX Converter

Convert decimal RGB integer components (0-255) to uppercase 6-digit padded hexadecimal strings.

Open Tool

HSL to HEX Converter

Transform cylindrical HSL coordinates into standardized 6-digit hexadecimal web color strings.

Open Tool

Pantone to HEX Matcher

Match any hex or RGB color to the closest standard Pantone PMS color using CIEDE2000 Delta E in Lab space.

Open Tool