This is a HSV view color picker. H - Hue, S - Saturation, V - Value. The HSV color is quite similar to the way in which humans perceive color.
Launch the color picker is easy. The input background colors can be updated online.
var clrpicker1 = new pgcolor();
clrpicker1.init({
id: "kk",
style: {
header: "#7fff00",
body: "#7fff00",
footer: "#7fff00",
border: "solid #fafad2 1px"
}
});
2 output data may be necessary.
var hex = clrpicker1.Hex(); //output hex format color like #ffffff var rgb = clrpicker1.RGB(); //output RGB format color, e.g., rgb(255,255,0)
Choose the sections of the color picker to update their background-colors. Of course, there are others that could be changed. It's just a concept to make things easy.
You can also attach event to the drag or click/mouseup event.
var clrpicker1 = new pgcolor();
clrpicker1.init({
id: "kk",
style: {
...,
...,
...,
...,
fire: dosomething, // fire when drag
fireup: domorething // fire when mouseup and click for more complicated event
}
});
function dosomething() {
var color = clrpicker1.hex();
$("div").style.backgroundColor = color;
}
function domorething() {
...
...
}