- Hex To Hsl
- Step 1: Convert Hex to RGB
- Step 2: Normalize RGB values
- Step 3: Find the minimum and maximum normalized RGB values
- Step 4: Calculate the Hue (H)
- Step 5: Calculate the Lightness (L)
- Step 6: Calculate the Saturation (S)
- Step 7: Adjust Hue (optional)

**Hex To Hsl**

Converting a color from hexadecimal (hex) to HSL (hue, saturation, lightness) involves several steps. First you need to convert the hexadecimal color to an RGB value. You can then convert the RGB values to HSL. Here's a step-by-step guide:

** Step 1: Convert Hex to RGB**

To convert a 6-digit hexadecimal color **(e.g. #RRGGBB) **to an **RGB **value, split the hexadecimal code into three pairs of two characters each for red **(RR)**, green **(GG)**, and blue **(BB) **is needed. Then convert each pair from hexadecimal to decimal.

**For example, if you have the hex color #336699:**

**R: 33 (hex) = 3 * 16 + 3 = 51 (decimal)**

**G: 66 (hex) = 6 * 16 + 6 = 102 (decimal)**

**B: 99 (hex) = 9 * 16 + 9 = 153 (decimal)**

**So, the RGB values for #336699 are: R=51, G=102, B=153.**

**Step 2: Normalize RGB values**

Normalize the RGB values to be in the range of 0 to 1 by dividing each value by 255 (the maximum value for an 8-bit color channel).

**R_norm = 51 / 255 ≈ 0.2**

**G_norm = 102 / 255 ≈ 0.4**

**B_norm = 153 / 255 ≈ 0.6**

**Step 3: Find the minimum and maximum normalized RGB values**

Find the minimum (min_RGB) and maximum (max_RGB) values among the normalized R, G, and B values.

**min_RGB ≈ 0.2 (in this case, R_norm is the smallest)**

**max_RGB ≈ 0.6 (in this case, B_norm is the largest)**

**Step 4: Calculate the Hue (H)**

The Hue value (H) represents the color itself and is calculated based on the relative proportions of the RGB channels. It's expressed as an angle in degrees **(0° to 360°).** The formula to calculate H is:

**H = 60 * ( (G_norm - B_norm) / (max_RGB - min_RGB) ) mod 360**

**In this case, H ≈ 60 * ((0.4 - 0.2) / (0.6 - 0.2)) ≈ 60 * (0.2 / 0.4) ≈ 60 * 0.5 ≈ 30°**

**Step 5: Calculate the Lightness (L)**

The Lightness value (L) represents the brightness of the color and is calculated as the average of the max_RGB and min_RGB:

**L = (max_RGB + min_RGB) / 2 ≈ (0.6 + 0.2) / 2 ≈ 0.4**

**Step 6: Calculate the Saturation (S)**

The Saturation value (S) represents the intensity of the color and is calculated based on the lightness and the maximum and minimum RGB values:

**S = (max_RGB - min_RGB) / (1 - |2 * L - 1|)**

**S = (0.6 - 0.2) / (1 - |2 * 0.4 - 1|) ≈ 0.4 / 0.2 ≈ 2**

**Step 7: Adjust Hue (optional)**

Sometimes, the calculated hue may be negative or greater than 360°. If this is the case, adjust the hue as follows:

**If H < 0, then H = H + 360°**

**If H > 360°, then H = H - 360°**

*In this case, H = 30° (no adjustment needed)*

So, the HSL representation of the color #336699 is approximately: **H=30°, S=2, L=0.4.** Note that HSL values are often expressed with H as an angle and S and L as percentages, so the final representation may be given as **HSL(30°, 200%, 40%).**