Hex to HSL Converter – Free Online Tool

HEX to HSL color converter

HSL stands for Hue, Saturation, Lightness, a color model widely used in modern UI/UX and CSS.

• Hue (0°–360°) → actual color tone

• Saturation (0%–100%) → color intensity

• Lightness (0%–100%) → brightness

HSL makes it easier to adjust color shades, tints, and tones.

What is HSL

How to Convert Hex to HSL

HEX to HSL Color Code Examples

What is Hex Color

Hex is a 6-digit hexadecimal color code used in web design, defined as #RRGGBB.

• RR = Red value

• GG = Green value

• BB = Blue value

Example: #FF0000 represents pure red.

Why Use Our Hex to HSL Converter

To convert Hex to HSL, you first break the HEX code into its Red, Green, and Blue components, convert each RGB value into a 0–1 scale, then apply the Hex to HSL formula to calculate Hue, Saturation, and Lightness. This simple hex to hsl conversion method is used in every hex to hsl converter online. Understanding how to convert hex to hsl manually helps designers and developers adjust colors more accurately and create consistent color themes.

HEX to HSL color conversion formula

convert Hex to HSL, follow these simple steps:

Step 1: Split HEX into RGB components

Example Hex value is: #FF5733

• FF → Red (255)

• 57 → Green (87)

• 33 → Blue (51)

Step 2: Convert RGB (0–255) to RGB (0–1)

Divide each value by 255:

R = 255/255 = 1
G = 87/255 ≈ 0.341
B = 51/255 ≈ 0.2

Step 3: Find max and min values

max = 1
min = 0.2

Step 4: Lightness Calculation

L = (max + min) / 2

L = (1 + 0.2) / 2 = 0.6 → 60%

Step 5: Saturation Calculation

If max = min → S = 0
Else:

S = (max − min) / (1 − |2L − 1|)

S ≈ 0.78 → 78%

Step 6: Hue Calculation

If max = R:

H = 60 × ((G − B) / (max − min))

H ≈ 14°

So the final HSL value is:

HSL(14°, 78%, 60%)

• Fast and accurate color conversion

• Ideal for web designers, developers, and digital artists

• No login, no limit, 100% free

• Real-time color preview

Related Tools:

• Hex to RGB Converter

• RGB to HEX Converter

• HSL to CMYK Converter

More Tools

• Color Picker

• Color Contrast Checker

• Color Converter

• Image Color Picker