Vanilla javascript HSLA (HUE, SATURATION, LIGHT, ALPHA) color picker with interactive sliders.

Must Read: A Color Parsing and Manipulation Typescript Library | color2k

How to make use of it:

1. Create a container where you want to apply the selected color as well.

<div class="swatch" style="background-color: hsla(170, 55%, 55%, 1)">

2. Create another container to display the color name.

<h3 class="colorname">hsla color</h3>

3. Create the HUE, SATURATION, LIGHT, and ALPHA sliders for the color picker.

<h6>HUE</h6>
<div class="hue">
  <input name="hue" type="range" min="1" max="300" value="130">
</div>
<h6>SATURATION</h6>
<div class="satcolor">
  <div class="sat">
    <input name="sat" type="range" min="1" max="100" value="100">
  </div>
</div>
<h6>LIGHT</h6>
<div class="light">
  <input name="light"type="range" min="1" max="100" value="55">
</div>
<h6>ALPHA</h6>
<div class="alpha">
  <input name="alpha"type="range" min="0" max="1" step="0.01" value="1">
</div>

4. Load the main JavaScript file at the end of the document.

<script src="main.js" defer></script>

See Demo And Download

Official Website(lizthrilla): Click Here

This superior jQuery/javascript plugin is developed by lizthrilla. For extra Advanced Usage, please go to the official website.