HSLa color picker v2

by secretgspot

HTML

<input type="range" min="0" max="360" value="0"   id="hue">
<input type="range" min="0" max="100" value="50"  id="saturation">
<input type="range" min="0" max="100" value="50"  id="lightness">
<input type="range" min="0" max="100" value="100" id="alpha">

<div id="result"></div>

CSS

body {
    margin: 50px auto;
    width: 500px;
}
input {
    position: relative;
    width: 24.5%;
}
input:after {
    content: attr(id);
    position: absolute;
    text-align: center;
    top: -16px;
    width: 100%;
}
#result {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1);
}
#result div {
    background: #eee;
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align: top;
    -webkit-transition: .25s;
       -moz-transition: .25s;
        -ms-transition: .25s;
         -o-transition: .25s;
            transition: .25s;
}
#result:hover div:not(:hover) {
    -webkit-transform: scale(.8);
       -moz-transform: scale(.8);
        -ms-transform: scale(.8);
         -o-transform: scale(.8);
            transform: scale(.8);
}
#result div:hover {
    box-shadow: 0 1px 4px hsla(0,0%,0%,.25);
}

JavaScript

var resolution = 10;

function foo() {
    for(j = 0; j < resolution; j++) { 
        $('#result').append('<div id="g' + i + j + '"></div>');
    }
};

for(i = 0; i < resolution; i++) {
    foo();
}
        
$('input').change(function() {
    
    var hue = $('#hue').val(),
        saturation = $('#saturation').val(),
        lightness = $('#lightness').val(),
        alpha = $('#alpha').val(),
        result = $('#result');
    
    function bar() {
        for(j = 0; j < resolution; j++) {
            if (i < 5) {
                $('#g' + i + j).css('background', 'hsla(' + (parseInt(hue) - (i * 2) - (j * 2)) + ', ' + (parseInt(saturation) - (i * 2) - (j * 2)) + '%, ' + (parseInt(lightness) - (i * 2) - (j * 2)) + '%, ' + (alpha/100) + ')');
            } else {
                $('#g' + i + j).css('background', 'hsla(' + (parseInt(hue) + (i * 2) + (j * 2)) + ', ' + (parseInt(saturation) + (i * 2) + (j * 2)) + '%, ' + (parseInt(lightness) + (i * 2) + (j * 2)) + '%, ' + (alpha/100) + ')');
            }
        }
    };
    
    result.css('background', 'hsla(' + hue + ', ' + saturation + '%, ' + lightness + '%, .25)');
    
    for(i = 0; i < resolution; i++) {
        bar();
    }
    
});