Color Picker Generator

Introduce a javascript color picker object and update its scheme online

View of Color Picker

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.


Javascript Object

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"
    }
});

Method

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.

header
body
footer
border


Event

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() {
...
...
}