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.