QuickUtil logoQuickUtil

HSL to HEX Color Converter

Instantly convert Hue, Saturation, Lightness (HSL) to Hexadecimal (HEX) color codes. Enter any HSL value and get the HEX equivalent in real time — no signup required.

Color Preview

#6467F2

#6467F2

All formats

HEX

#6467F2

RGB

rgb(100, 103, 242)

CMYK

cmyk(59%, 57%, 0%, 5%)

Ad · Leaderboard (728×90)

HSL vs HEX — What's the Difference?

HSL

Hue, Saturation, Lightness

Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). Designed to be intuitive for humans — great for adjusting color tones in CSS.

Example: color: hsl(239, 84%, 67%)

HEX

Hexadecimal

A 6-digit hex code (#RRGGBB) representing red, green, and blue channels in base-16. The most widely used color format in web development and CSS.

Example: color: #6366f1

How to Convert HSL to HEX

Step 1: HSL → RGB (hue sector formula). Step 2: RGB → HEX (each channel to 2-digit hex)

All conversion math runs in your browser using the sRGB color space. No data is sent to a server.

Common Colors — HSL to HEX Reference Table

ColorHSLHEX
Redhsl(0, 100%, 50%)#FF0000
Greenhsl(120, 100%, 25%)#008000
Bluehsl(240, 100%, 50%)#0000FF
Whitehsl(0, 0%, 100%)#FFFFFF
Blackhsl(0, 0%, 0%)#000000
Orangehsl(39, 100%, 50%)#FFA500
Purplehsl(300, 100%, 25%)#800080
Yellowhsl(60, 100%, 50%)#FFFF00
Cyanhsl(180, 100%, 50%)#00FFFF
Magentahsl(300, 100%, 50%)#FF00FF
Grayhsl(0, 0%, 50%)#808080
Pinkhsl(350, 100%, 88%)#FFC0CB

Related Color Converters

RGB to HEX

Red, Green, Blue → Hexadecimal

HSL to RGB

Hue, Saturation, Lightness → Red, Green, Blue

HSL to CMYK

Hue, Saturation, Lightness → Cyan, Magenta, Yellow, Key (Black)

CMYK to HEX

Cyan, Magenta, Yellow, Key (Black) → Hexadecimal

Frequently Asked Questions

How do I convert HSL to HEX?

To convert HSL to HEX: Step 1: HSL → RGB (hue sector formula). Step 2: RGB → HEX (each channel to 2-digit hex). Use the converter above to do this instantly for any color value.

What is the HSL color format?

Hue, Saturation, Lightness (HSL) — Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). Designed to be intuitive for humans — great for adjusting color tones in CSS.

What is the HEX color format?

Hexadecimal (HEX) — A 6-digit hex code (#RRGGBB) representing red, green, and blue channels in base-16. The most widely used color format in web development and CSS.

Is this HSL to HEX converter free?

Yes. It is completely free, works in your browser with no signup or upload. All color math runs locally.

Can I convert HEX back to HSL?

Yes — use the swap button in the converter above, or visit the HEX to HSL converter page directly.

Looking for the reverse? Convert HEX to HSL (Hexadecimal → Hue, Saturation, Lightness)
Ad · Medium Rectangle (300×250)