hsla.html

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<title>HSLA Color Picker</title>
<style>
#hslah i {
display: inline-block;
width: 1px;
height: 20px;
}
#hslas, #hslal, #hslaa, #hslah {
width: 361px;
height: 20px;
display: inline-block;
}
.example {
	padding: 15px; 
	color: #FFF; 
	text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
	font-size: 40px; 
	font-weight: bold;
	text-align: center;
}
p, h1 {font-family:arial, helvetica, sans-serif;}
</style>
</head>

<body>
 <section>
        <pre contenteditable>color:<b>hsla</b>(
   <span class="hsl-value" id="hsl-h-value">328,</span>  <input id="hsl-h" type="range" min="0" max="360" value="328"> H  <div id="hslah">blah</div>
   <span class="hsl-value" id="hsl-s-value">100%,</span> <input id="hsl-s" type="range" min="0" max="100" value="100"> S  <div id="hslas"></div>
   <span class="hsl-value" id="hsl-l-value">44%, </span> <input id="hsl-l" type="range" min="0" max="100" value="44"> L  <div id="hslal"></div>
   <span class="hsl-value" id="hsl-a-value">1.00</span>	 <input id="hsl-a" type="range" min="0" max="100" value="100"> A  <div id="hslaa"></div>
);        </pre><h1 id="hsl-example" class="example" style="background-color:  hsla(328, 100%, 44%, 1);"> HSLA Colors</h1>

<script>
var colorChanger = {
  loadEvent : function () {
		this.changeHSL();
  		this.createHSLA();
  		this.addEvents();
  },
  addEvents : function() {
  	 var inputs = document.querySelectorAll('input');
  	 for(var i = 0; i < inputs.length; i++){
  	 	inputs[i].addEventListener('change', function() {
  	 		colorChanger.changeHSL();
  	 	}); 
  	 }	
  },
  getEl : function(el) {
  	return document.getElementById(el);
  }	,
  createHSLA : function(h, s, l, a) {
     h = h || this.getEl('hsl-h').value * 1.0;
     s = s || this.getEl('hsl-s').value * 1.0;
     l = l || this.getEl('hsl-l').value * 1.0;
     a = a || this.getEl('hsl-a').value * 1.0;
	
	let hslapicker = "";
	for(var i=0; i <=360; i++){
		hslapicker+= '<i style="background: hsla(' + i + ', ' + s + '%, ' + l + '%, ' + a +')"></i>';
    }
//	hslapicker+= '<i style="background: hsla(' + h + ', ' + s + '%, ' + l + '%, ' + a +')" class="big"></i>'
	this.getEl('hslah').innerHTML = hslapicker; 
	
	this.getEl('hslas').style.background = 
        'linear-gradient(90deg, hsl('+h+', 0%, '+ l +'%) 0%, hsl('+h+', 100%, '+ l +'%) 100%)';
		
	this.getEl('hslal').style.background = 
        'linear-gradient(90deg, hsla('+h+', '+ s +'%, 0%, 1) 0%, hsla('+h+', '+ s +'%, 50%, 1) 50%,  hsla('+h+', '+ s +'%, 100%, 1) 100%)';
	this.getEl('hslaa').style.background = 
        'linear-gradient(90deg, hsla('+h+', '+ s +'%, '+l+'%, 0) 0%, hsla('+h+', '+ s +'%, '+l+'%, 1) 100%)';		  
   },
  
  changeHSL: function() {
    var h = this.getEl('hsl-h').value * 1.0;
    var s = this.getEl('hsl-s').value * 1.0;
    var l = this.getEl('hsl-l').value * 1.0;
    var a = this.getEl('hsl-a').value * 1.0;
	var hex = '';
	
	a = ((a < 1 && a > 0) ? a : a / 100).toFixed(2);
    var el = this.getEl('hsl-example');
	if(a == 1){
	var hsla = 'hsl(' + h + ', ' + s + '%, ' + l + '%)'
	} else {
	var hsla = 'hsla(' + h + ', ' + s + '%, ' + l + '%, ' + a + ')'	
	}
    el.style.backgroundColor = hsla;
	var rgba = el.style.backgroundColor;

	hex = '<br/>' + this.colorToHex(rgba, a);
	
	el.innerHTML = hsla + " <br/>" + rgba + hex;

    this.getEl('hsl-h-value').textContent = (h < 100)? h + ', ': h + ',';
    this.getEl('hsl-s-value').textContent = (s < 100)? s + '%, ': s + '%,';
    this.getEl('hsl-l-value').textContent = (l < 100)? l + '%, ': l + '%,';
    this.getEl('hsl-a-value').textContent = a + '';
	this.createHSLA(h, s, l, a);
  },
  
  colorToHex : function(color, a = 1) {
		color = color.replace(/rgba?\(/g, '').replace(/\)/g, '').split(', ');
		var red = parseInt(color[0]);
		var green = parseInt(color[1]);
		var blue = parseInt(color[2]);
		var trans;


		//var rgb = blue | (green << 8) | (red << 16);
		//console.log(rgb);
		//rgb = rgb.toString(16);
		return  ('#' + this.convertHex(red) + ' ' + this.convertHex(green) + ' ' + this.convertHex(blue) + ' ' + this.convertHex(a, true)).toUpperCase();
	},

	convertHex: function(a, alpha) {
		var trans;

		if(alpha) {
			switch (a * 1) { // force a to number
			case 1: 
				trans = '';
				break;
			case 0: 
				trans = '00';
				break;
			default:
				trans = parseInt(a * 256).toString(16);
				if(trans.length == 1) {
					trans = "0" + trans;
				} else if (trans.length == 0) {
					trans = "00";
				}
			}
		} else {
			trans = a.toString(16);
			if(trans.length == 1) {
				trans = '0' + trans;
			}
		}
		return trans;
	}
};

(function(){
  colorChanger.loadEvent();
})();

</script>
          </section>
</body>
</html>