Hex To Hsl

HSL Representation
Last Update:


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%).

Hsl To HEX

#Hex to Hsl #Hex #Hsl #Converter

We use cookies to enhance your experience on our website. The types of cookies used: Essential Cookies and Marketing Cookies. To read our cookie policy, click here.