Converting HEX colors to HSL is essential for a wide range of image processing and computer graphics tasks. The HSL color model breaks down colors into hue, saturation, and lightness components, providing a perceptually uniform color space that is invaluable for activities like color selection, color mixing, and editing images.

## How to Manually Convert HEX to HSL

Converting a hexadecimal color code to HSL involves several steps:

### Convert HEX to RGB

Hexadecimal | Decimal |

0 | 0 |

1 | 1 |

2 | 2 |

3 | 3 |

4 | 4 |

5 | 5 |

6 | 6 |

7 | 7 |

8 | 8 |

9 | 9 |

A | 10 |

B | 11 |

C | 12 |

D | 13 |

E | 14 |

F | 15 |

- Divide the hexadecimal code into three pairs of two digits
- Convert each pair into its decimal equivalent
- These three decimal values represent the RGB values

*For Example:*

Let's say, the hexadecimal code #FFA500 is divided into three pairs of two digits: FF, A5, and 00.

Converting each pair into its decimal equivalent:

- FF in hexadecimal is equivalent to (15 * 16) + 15 = 255 in decimal
- AF in hexadecimal is equivalent to (10 * 16) + 15 = 165 in decimal
- 00 in hexadecimal is equivalent to (0 * 16) + 0 = 0 in decimal

Therefore, the RGB values are (255, 165, 0)

### Convert RGB to Normalized RGB

- Divide each RGB value by 255 to get the normalized RGB values between 0 and 1.

**Interpreting Formula**

Normalize each RGB value by dividing it by 255:

- R* = 255 / 255 = 1
- G* = 165 / 255 ≈ 0.647
- B* = 0 / 255 = 0

Normalized RGB values: (1, 0.647, 0)

### Calculate the Hue (H)

- Find the maximum and minimum values of the normalized RGB values.
- Subtract the minimum from the maximum to get the delta (Δ).

**Use the following formulas to calculate the Hue:**

- If Δ = 0, then H = 0.
- If the maximum value is R, then H = 60 × ((G - B) / Δ) + 0.
- If the maximum value is G, then H = 60 × ((B - R) / Δ) + 120.
- If the maximum value is B, then H = 60 × ((R - G) / Δ) + 240.
- If H is negative, add 360 to get the correct Hue value between 0 and 360.

**Interpreting Formula**

Find the maximum and minimum values of the normalized RGB values:

Maximum = 1, Minimum = 0

Δ = Maximum - Minimum = 1 - 0 = 1

Since Δ ≠ 0, we'll proceed with the Hue calculation.

Since the maximum value is red (R), we'll use the relevant formula:

- H = 60 × ((0.647 - 0) / 1) + 0
- H ≈ 60 × 0.647 ≈ 38.82

The resulting Hue is approximately 39°.

### Calculate the Lightness (L)

- L = (Maximum RGB Value + Minimum RGB Value) / 2

**Interpreting Formula**

L = (1 + 0) / 2 = 0.5

### Calculate the Saturation (S)

- If L = 0 or L = 1, then S = 0.

Otherwise,

- S = (Maximum RGB Value - Minimum RGB Value) / (1 - |2 × L - 1|)

**Interpreting Formula**

Since L is not 0 or 1, we'll proceed with the calculation:

- S = (Maximum RGB Value - Minimum RGB Value) / (1 - |2 × L - 1|)
- S = (1 - 0) / (1 - |2 × 0.5 - 1|)
- S = 1 / (1 - |1 - 1|) = 1

*Resulting HSL values*

- Hue (H): Approximately 39°
- Saturation (S): 100%
- Lightness (L): 50%

So, for the example color code #FFA500, the HSL breakdown is approximately Hue 39°, Saturation 100%, and Lightness 50%.

## Examples

**HEX: #FF6347**

Result: HSL (9, 100%, 64%)

Color: Tomato

Tone: This color has a warm tone added due to its reddish-orange hue.

**HEX: #4682B4**

Result: HSL (207, 44%, 49%)

Color: Steel Blue

Tone: It has a cool tone added because of its blue hue with a hint of gray.

**HEX: #90EE90**

Result: HSL (120, 73%, 75%)

Color: Light Green

Tone: This color has a fresh and vibrant tone added due to its light and bright green shade.

**HEX: #8A2BE2**

Result: HSL (271, 76%, 53%)

Color: Blue Violet

Tone: It has a rich and deep tone added because of its dark purple-blue hue.

**HEX: #FFFF00**

Result: HSL (60, 100%, 50%)

Color: Yellow

Tone: This color has a bright and cheerful tone added due to its vibrant yellow shade.