Output Color

Loading… Please Wait

About RGB to HSLA Converter

Input an RGB value like rgb(0, 255, 255) and Diversify India’s RGB to HSLA converter will convert this value to an HSLA color like hsla(180deg, 100%, 50%, 1).

RGB color parameters are red, green, and blue. The output HSLA color parameters are hue, saturation, lightness, and alpha.

Why Convert RGB to HSLA?

Converting RGB to HSLA is useful when you need to define colors in terms of their hue, saturation, and lightness along with opacity. HSLA is often preferred in design and development for its intuitive representation of color relationships. This format makes it easier to create harmonious color schemes and adjust colors based on lightness and saturation.

How to Convert RGB to HSLA

To convert RGB to HSLA, you need to transform the red, green, and blue components from their decimal values into hue, saturation, and lightness, and then include the alpha component.

  1. Extract the values for Red (R), Green (G), and Blue (B) from the RGB code.
    • Example: rgb(55, 109, 71) gives R = 55, G = 109, B = 71.
  2. Convert the RGB values to a range of 0 to 1 by dividing by 255.
    • R = 55 / 255 = 0.216
    • G = 109 / 255 ≈ 0.43
    • B = 71 / 255 ≈ 0.278
  3. Calculate the minimum and maximum values among the normalized R, G, and B values, and find the difference.
    • Max = 0.43
    • Min = 0.216
    • Delta = Max – Min = 0.214
  4. Calculate Lightness (L).
    • L = (Max + Min) / 2
    • Example: L = (0.43 + 0.216) / 2 ≈ 0.323
  5. Calculate Saturation (S).
    • If Delta = 0, S = 0
    • If Delta ≠ 0, S = Delta / (1 – |2L – 1|)
    • Example: S ≈ 0.214 / (1 – |2 × 0.323 – 1|) = 0.33
  6. Calculate Hue (H).
    • If Max = R, H = 60 × ((G – B) / Delta % 6)
    • If Max = G, H = 60 × ((B – R) / Delta + 2)
    • If Max = B, H = 60 × ((R – G) / Delta + 4)
    • Example: Max = G, so H = 60 × ((0.278 – 0.216) / 0.214 + 2) ≈ 137
  7. Convert Lightness (L) and Saturation (S) to a percentage:
    • L = 0.323 × 100 ≈ 32%
    • S = 0.33 × 100 = 33%
  8. The Alpha value spans from 0 (fully transparent) to 1 (fully opaque). You can choose the desired alpha value based on the transparency needed.
    • Example: Adding an alpha value of 0.5 for 50% transparency.
  9. Combine the HSL values with the Alpha (A) value to form the HSLA value..
    • Example: hsla(137deg, 33%, 32%, 0.5)

List of Color Tools