Output Color

Loading… Please Wait

About RGBA to HSLA Converter

Input an RGBA value like rgba(255, 0, 255, 0.5) and RGBA to HSLA converter will convert this value to an HSLA color like hsla(300deg, 100%, 50%, 0.5).

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

Why Convert RGBA to HSLA?

Converting RGBA 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 RGBA to HSLA

To convert RGBA 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), Blue (B), and Alpha (A) from the RGBA code.
    • Example: rgba(255, 99, 71, 0.5) gives R = 255, G = 99, B = 71, A = 0.5.
  2. Convert the RGB values to a range of 0 to 1 by dividing by 255.
    • R = 255 / 255 = 1
    • G = 99 / 255 ≈ 0.388
    • 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 = 1
    • Min = 0.278
    • Delta = Max – Min = 0.722
  4. Calculate Lightness (L).
    • L = (Max + Min) / 2
    • Example: L = (1 + 0.278) / 2 ≈ 0.639
  5. Calculate Saturation (S).
    • If Delta = 0, S = 0
    • If Delta ≠ 0, S = Delta / (1 – |2L – 1|)
    • Example: S ≈ 0.722 / (1 – |2 × 0.639 – 1|) = 1
  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 = R, so H = 60 × ((0.388 – 0.278) / 0.722 % 6) ≈ 9
  7. Convert Lightness (L) and Saturation (S) to a percentage:
    • L = 0.639 × 100 ≈ 64%
    • S = 1 × 100 = 100%
  8. Combine the HSLA values.
    • Example: hsla(9deg, 100%, 64%, 0.5)

List of Color Tools