Hsl To Rgb

R
G
B
R, G, B
Last Update:


Hsl To Rgb

HSL (Hue, Saturation, Lightness) and RGB (Red, Green, Blue) are two different color models used to represent colors in digital imaging and computer graphics. HSL is often considered more intuitive for human perception and manipulation of colors, while RGB is closely tied to the way colors are displayed on electronic screens.

HSL (Hue, Saturation, Lightness):

  • Hue: This represents the actual color, such as red, blue, green, etc. It is represented as an angle on a color wheel, ranging from 0° to 360°. Red is typically located at 0°, green at 120°, and blue at 240°.
  • Saturation: This measures the intensity or purity of a color. A saturation value of 100% means the color is fully saturated and vibrant, while a value of 0% results in a grayscale color (no color).
  • Lightness: This represents the brightness of the color. A lightness value of 0% is completely black, 100% is completely white, and 50% is the original color with normal brightness.

Converting from HSL to RGB involves several mathematical operations. Once you have the hue, saturation, and lightness values, you can use the following formulas to calculate the corresponding RGB values:

  1. Normalize the hue: Convert the hue angle from degrees to a value between 0 and 1.
  2. Calculate chroma: Chroma represents the saturation of the color without considering the lightness. It is calculated by multiplying the saturation by the minimum of (1 - |2 * lightness - 1|) and 1.
  3. Calculate temporary values: These temporary values help in calculating intermediate components of the RGB color.
    • X = chroma * (1 - |(hue / 60) % 2 - 1|) (used for intermediate calculations)
    • m = lightness - chroma / 2
  4. Calculate RGB components:
    • If 0° <= hue < 60°: RGB = (chroma + m, X + m, m)
    • If 60° <= hue < 120°: RGB = (X + m, chroma + m, m)
    • If 120° <= hue < 180°: RGB = (m, chroma + m, X + m)
    • If 180° <= hue < 240°: RGB = (m, X + m, chroma + m)
    • If 240° <= hue < 300°: RGB = (X + m, m, chroma + m)
    • If 300° <= hue < 360°: RGB = (chroma + m, m, X + m)
  5. Normalize RGB values: Ensure that the calculated R, G, and B values are between 0 and 1. If needed, you can multiply them by 255 to get the standard 8-bit color values.

Remember that these formulas assume the hue value is given in degrees and the saturation and lightness values are between 0 and 1.

Converting from HSL to RGB and vice versa can be a bit complex, so using libraries or tools that provide built-in functions for color space conversions can make the process easier.

Color Table

Color Name HSL (H, S, L) RGB (R, G, B) Color Preview
Red (0, 1, 0.5) (255, 0, 0)  
Green (120, 1, 0.5) (0, 255, 0)  
Blue (240, 1, 0.5) (0, 0, 255)  
Yellow (60, 1, 0.5) (255, 255, 0)  
Turquoise (180, 1, 0.5) (0, 255, 255)  
Lavender (300, 1, 0.5) (255, 0, 255)  
Black (0, 0, 0) (0, 0, 0)  
White (0, 0, 1) (255, 255, 255)  
Saturated Black (0, 1, 0) (0, 0, 0)  
Saturated Red (0, 1, 1) (255, 0, 0)  
Pale Green (120, 1, 0.25) (64, 128, 64)  
Pastel Purple (240, 0.5, 0.75) (128, 64, 128)  

#hsl to rgb #hsl converter #color 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.