Convert HSL to HEX

Convert HSL colors to HEX codes. Transform hue, saturation, lightness values to hexadecimal. Free online color converter.

Formula: HSL → RGB → HEX (hue/saturation/lightness to #RRGGBB)

Quick example: hsl(217, 82%, 53%) → #2563EB

Color Preview

#2563EB

Color Values

HEX

RGB

HSL

CMYK84%, 58%, 0%, 8%

Alpha

100%

Tailwind

blue-600#2563ebclose match

WCAG Contrast Checker

Foreground#2563eb

Background#ffffff

Contrast Ratio

5.17:1

Sample Text Preview

AA Large: PassAA Normal: PassAAA: Fail

Analogous Palette

About This Conversion

Converting HSL to HEX is necessary when your design system uses HSL for color management but your code needs hex values for CSS variables, SVG fills, or third-party libraries that only accept hex. The conversion involves transforming hue (0-360°), saturation (0-100%), and lightness (0-100%) through the RGB color space to arrive at the six-digit hex code. This tool handles the math instantly, including edge cases with extreme saturation or lightness values.

Frequently Asked Questions

How accurate is HSL to HEX conversion?

The conversion is mathematically precise. However, since hex codes have 256 values per channel and HSL is continuous, there can be very slight rounding in extreme cases.

What HSL values produce white and black?

White is hsl(any, any, 100%) — lightness 100% regardless of hue/saturation. Black is hsl(any, any, 0%). Pure gray is any hue with 0% saturation.

Can I convert HSL with alpha to HEX?

Yes. 8-digit hex codes support alpha: #RRGGBBAA. This tool converts HSLA to the full 8-digit hex format when alpha is specified.

Related Color Conversions

Convert HEX to HSL

HEX → RGB → HSL (hue 0-360°, saturation 0-100%, lightness 0-100%)

Convert RGB to HEX

HEX = # + R.toString(16) + G.toString(16) + B.toString(16)

Convert HSL to RGB

H (0-360°), S (0-100%), L (0-100%) → R, G, B (0-255)

Convert HEX to RGB

R = hex[1-2], G = hex[3-4], B = hex[5-6] (as decimal)

Back to Full Color Converter (HEX, RGB, HSL, CMYK)