HSL to HEX Converter

Convert HSL (hue, saturation, lightness) values to a HEX color code instantly. See the exact HEX, RGB, HSV and CMYK values simultaneously.

Format: hue (0–360), saturation (0–100), lightness (0–100). Example: 215, 84, 51

Converted Values

HEX#155EEF
RGBrgb(21, 94, 239)
HSLhsl(215, 84%, 51%)
HSVhsv(215, 84%, 94%)
CMYKcmyk(91%, 61%, 0%, 6%)

What Is HSL to HEX Conversion?

HSL to HEX conversion translates hue, saturation and lightness values into a six-digit hexadecimal code. HSL is intuitive and human-readable; HEX is compact and the standard in CSS and HTML. Converting between them is essential when you design a palette in HSL but need to ship the final values as HEX.

How HSL to HEX Works

HSL is first converted to RGB using the standard color-space formula (hue becomes an angle on the color wheel, saturation and lightness scale the resulting channels), then each RGB channel is written as two hexadecimal digits.

hsl(215, 84, 51)

Step 1: Convert to RGB
  → rgb(21, 94, 239)

Step 2: Convert each channel to hex
  R 21  → 15
  G 94  → 5E
  B 239 → EF

Result: #155EEF

Example Conversions

  • hsl(0, 100%, 50%) → #FF0000 — red
  • hsl(120, 100%, 25%) → #008000 — green
  • hsl(240, 100%, 50%) → #0000FF — blue
  • hsl(215, 84%, 51%) → #155EEF — OmniColor blue

Why Convert HSL to HEX?

  • CSS compatibility: HEX is accepted in every browser and every CSS property.
  • Design handoff: Designers think in HSL; developers ship in HEX.
  • Brand guidelines: HEX is the standard notation in most brand guides.
  • Email and legacy systems: Some older systems only support HEX.

Frequently Asked Questions