Output Color

Loading… Please Wait

About RGBA to HSL Converter

Input an RGBA value like rgba(255, 0, 255, 0.5) and Diversify India’s RGBA to HSL converter will convert this value to an HSL color like hsl(300deg, 100%, 75%).

Additionally, we can even specify a background color in RGBA format. Diversify India’s RGBA to HSL converter will mix these foreground and background colors to get the resultant HSL color.

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

Why Convert RGBA to HSL?

Converting RGBA to HSL is useful when you need to define colors in terms of their hue, saturation, and lightness without considering opacity. HSL provides a more intuitive way to adjust and harmonize colors based on their lightness and color relationships. This format is often preferred in design tools and color pickers for its simplicity and ease of use.

How to Convert RGBA to HSL

To convert RGBA to HSL, you need to transform the red, green, and blue components from their decimal values into hue, saturation, and lightness.

  1. Extract the values for Red (R), Green (G), Blue (B), and Alpha (A) from the RGBA code.
    • Example: rgba(25, 199, 71, 0.5) gives R = 25, G = 199, B = 71, A = 0.5.
  2. Convert the RGB values to a range of 0 to 1 by dividing by 255.
    • R = 25 / 255 ≈ 0.098
    • G = 199 / 255 ≈ 0.780
    • 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.780
    • Min = 0.098
    • Delta = Max – Min = 0.784 – 0.098 ≈ 0.682
  4. Calculate Lightness (L).
    • L = (Max + Min) / 2
    • Example: L = (0.780 + 0.098) / 2 ≈ 0.439
  5. Calculate Saturation (S).
    • If Delta = 0, S = 0
    • If Delta ≠ 0, S = Delta / (1 – |2L – 1|)
    • Example: S = 0.682 / (1 – |2 × 0.439 – 1|) ≈ 0.777
  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.098) / 0.682 + 2) ≈ 136
  7. Convert Lightness (L) and Saturation (S) to a percentage:
    • L = 0.439 × 100 ≈ 44%
    • S = 0.777 × 100 ≈ 78%
  8. Combine the HSL values.
    • Example: hsl(136deg, 78%, 44%)

List of Color Tools