Minimal HSLA Color picker With Pure JavaScript

Category: Color | January 10, 2017
Views Total:3,033 views
Official Page:Go to website
Last Update:January 10, 2017


Minimal HSLA Color picker With Pure JavaScript


A super simple, interactive HSLA (HUE, SATURATION, LIGHT and ALPHA) color picker with slider controls implemented in pure JavaScript.

How to use it:

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

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

Create another container to display the color name.

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

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

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

Load the main JavaScript file at the end of the document and done.

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

You Might Be Interested In:

One thought on “Minimal HSLA Color picker With Pure JavaScript

Leave a Reply