Converting RGB colors to HSL is crucial for various image processing and computer graphics applications. The HSL color model represents colors in terms of their hue, saturation, and lightness, offering a perceptually uniform color space that's useful for tasks such as color selection, color blending, and image editing.
How to Convert RGB to HSL?
Converting RGB values to HSL involves several steps for accurate color representation as discussed below:
Normalize RGB values
Before conversion, normalize the RGB values (0-255) to a range of 0 to 1:
- R' = R / 255
- G' = G / 255
- B' = B / 255
For Example
We have an RGB color with the values R=120, G=100, B=150, so normalizing it:
- R' = 120 / 255 ≈ 0.471
- G' = 100 / 255 ≈ 0.392
- B' = 150 / 255 ≈ 0.588
Find the maximum and minimum of R', G', and B'
Determine the maximum (max) and minimum (min) values among the normalized RGB components.
- max = maximum (R', G', B'), min = minimum (R', G', B')
Interpreting Formula
- Max. = maximum (0.471, 0.392, 0.588) ≈ 0.588
- Min. = minimum (0.471, 0.392, 0.588) ≈ 0.392
Calculate the Lightness (L)
The lightness component (L) represents the brightness of the color and is the average of the maximum and minimum RGB values:
- L = (max + min) / 2
Interpreting Formula
- L = (0.588 + 0.392) / 2 ≈ 0.49
Calculate the Saturation (S)
Saturation measures the intensity or purity of the color. It's determined based on the lightness and the maximum and minimum RGB values:
- If max = min, S = 0
Otherwise,
- If L ≤ 0.5, S = (max - min) / (max + min)
- If L > 0.5, S = (max - min) / (2 - max - min)
Interpreting Formula
As L ≤ 0.5, so:
- S = (0.588 - 0.392) / (0.588 + 0.392)
- S = 0.196 / 0.98
- S = 0.2
Calculate the Hue (H)
The hue component (H) represents the color itself and is calculated based on the relative positions of the normalized RGB values:
- If max = min, H is undefined
Otherwise,
- If max = R', H = (G' - B') / (max - min)
- If max = G', H = 2 + (B' - R') / (max - min)
- If max = B', H = 4 + (R' - G') / (max - min)
Interpreting Formula
As, max = B', so:
- H = 4 + (0.471 - 0.392) / (0.588 - 0.392)
- H = 4 + 0.079 / 0.196
- H = 4 + 0.403
- H = 4.403
Convert H to degrees: H = H * 60
If H is negative, add 360 to ensure it falls within the range of 0 to 360 degrees.
Otherwise, multiply it by 60 to convert it into degrees, as below:
since, H = 4.403, so:
- H = 4.403 * 60
- H = 264.18°
Interpreting HSL Values
Hue (H): Represents the color itself, ranging from 0 to 360 degrees. Red is at 0°, green at 120°, and blue at 240°.
Saturation (S): Indicates the intensity or purity of the color, ranging from 0% (grayscale) to 100% (fully saturated color).
Lightness (L): Represents the brightness of the color, ranging from 0% (black) to 100% (white).
Interpreting Values
- Hue (H): 264.18°
- Saturation (S): 20%
- Lightness (L): 49%
Examples
- Convert Red color to HSL
RGB: (255, 0, 0)
HSL: H: 0° S: 100% L: 50%
The HSL representation indicates a pure red color, fully saturated, and having moderate lightness.
- Convert Green color to HSL
RGB: (0, 255, 0)
HSL: H: 120° S: 100% L: 50%
This HSL representation signifies a pure green color, fully saturated, and having moderate lightness.
- Convert Blue color to HSL
RGB: (0, 0, 255)
HSL: H: 240° S: 100% L: 50%
The HSL values indicate a pure blue color, fully saturated, and having moderate lightness.
- Convert Yellow color to HSL
RGB: (255, 255, 0)
HSL: H: 60° S: 100% L: 50%
In HSL, this color is represented as yellow, fully saturated, and having moderate lightness.
- Convert White color to HSL
RGB: (255, 255, 255) to HSL: H: Undefined (All Hues) S: 0% L: 100%
The HSL values indicate a grayscale color with all hues and full lightness.