hsl color pick

HTML

<div id="colors">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
<div id="colors-category">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
<input type="number" value="210" id="hue-base">

CSS

p {
    width: 32px;
    height: 32px;
    display: inline-block;
}

JavaScript

var generateColor = function(categoryId, i) {
    if (i === undefined) {
        i = 0;
    }
    var hue = (+$('#hue-base').val() + categoryId * 137) % 360;
    var saturation = (32 + 11 * i) % 40 + 30;
    var lightness = (12 + 13 * i) % 40 + 30;
    var color = [hue, saturation + '%', lightness + '%'];
    return 'hsl(' + color.join(', ') + ')';
};
var changeColor = function() {
    $('#colors p').each(function(i) {
       $(this).css('backgroundColor', generateColor(i));
    })
    $('#colors-category p').each(function(i) {
       $(this).css('backgroundColor', generateColor(0, i));
    })
};
$('#hue-base').change(function() {
    changeColor();
});
changeColor();