Vanilla Javascript HSLA Color Picker With Interactive Sliders

hsla-color-picker

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

hsl color palette, rgba color picker, hex color picker, hsl color code, opencv hsv color picker

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>

Minimal HSLA Color picker Plugin/Github


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.

Share