RGBA to HSLA Converter

HSLA Color:


  1. This HTML and JavaScript code creates a web page with an input field for entering an RGBA color, a "Convert" button, and a div to display the resulting HSLA color.
  2. The convertToHsla function is called when the "Convert" button is clicked. It performs the RGBA to HSLA conversion and updates the result in the hslaResult div.
  3. Inside the convertToHsla function, we parse the RGBA color string using a regular expression to extract the numeric values of red (R), green (G), blue (B), and alpha (A).
  4. If the input is valid and contains four parts (R, G, B, and A), it converts the R, G, and B values to the range [0, 1]. Then, it calculates the Lightness (L), Hue (H), and Saturation (S) components of the HSL color model using the RGB-to-HSL conversion algorithm.
  5. The calculated HSLA values are rounded and displayed in the hslaResult div, along with the alpha (A) value.

You can copy and paste this code into an HTML file and open it in your web browser to use the RGBA to HSLA converter.