Check out my HSL color picker on JS Bin
I have created a simple HSL color picker that dynamically applies a gradient to a range input type upon DOM ready and changes to update the picker.
// Code Update Setup
$(".cpick-code-hsl").on('change keyup', function() {
$(this).val( "hsla(" + $(".cpick-hue-text").val() + ", " + $(".cpick-s-text").val() + ", " + $(".cpick-l-text").val() + ", " + $(".cpick-a-text").val() + ")");
// Apply as body background
$(".head").css({
"background": $(".cpick-code-hsl").val()
});
$(".cpick-code-rgb").val( $(".head").css("backgroundColor") );
// Alpha Saturation
$(".cpick-s").css({
"background": "linear-gradient(to right, #7f7f80 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%)" + " 100%)"
});
// Alpha Lightness
$(".cpick-l").css({
"background": "linear-gradient(to right, #000000 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%) 50%,#ffffff 100%)"
});
// Alpha Preview
$(".cpick-a").css({
"background": "linear-gradient(to right, rgba(51,51,51,0) 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%)" + " 100%)"
});
});
I found the Gradientz plugin, but it doesn't work in Firefox. Does anyone know of a simpler and more effective solution?