Beautiful Color Picker Supports Gradient Mode | xncolorpicker

How to make use of it:

1. Create a container to carry the set off of the colour picker.

<div id="colorpicker">
</div>

2. Load the xncolorpicker plugin within the doc.

<script src="dist/xncolorpicker.min.js"></script>

3. Call the plugin on the container component.

var xncolorpicker = new XNColorPicker({
    selector: "#colorpicker"
})

4. Apply styles to the set off component.

#colorpicker {
  /* your styles here */
}

5. Set the colour format you like: ‘rgba’, ‘hex’, or ‘hsla’.

var xncolorpicker = new XNColorPicker({
    selector: "#colorpicker",
    format: "rgba"
})

6. Customize the preset colours.

var xncolorpicker = new XNColorPicker({
    selector: "#colorpicker",
    // determine whether to show preset colors
    showprecolor: true,
    // customize your colors here
    prevcolors: ['#EF534F', '#BA69C8', '#FFD54F', '#81C784', '#7FDEEA', '#90CAF9', '#F44436', '#AB47BC', '#FFC106', '#66BB6A', '#25C6DA', '#4EC3F7', '#E53934', '#9D27B0', '#FFA726', '#4CAF50', '#00ACC1', '#29B6F6', '#D32E30', '#8F24AA', '#FB8C01', '#378E3C', '#0097A7', '#02AAF4', '#C62928', '#7B1FA2', '#F57C02', '#2F7D31', '#00838F', '#029BE5', '#B71B1C', '#6A1B9A', '#EF6C00', '#34691D', '#006164', '#0388D1', '#980A0B', '#4A148C', '#E65100', '#1A5E20', '#004D41', '#01579B', 'rgba(0,0,0,0)', '#FFFFFF', '#DBDBDB', '#979797', '#606060', '#000000']
})

7. Show a historical past of the latest colours that you just picked.

var xncolorpicker = new XNColorPicker({
    selector: "#colorpicker",
    // determine whether to show history
    showhistorycolor: true,
    // number of colors to show
    historycolornum: 16,
})

8. Determine whether or not to point out the palette.

var xncolorpicker = new XNColorPicker({
    selector: "#colorpicker",
    showPalette: false // default: true
})

9. Determine whether or not to point out the colour picker on web page load.

var xncolorpicker = new XNColorPicker({
    selector: "#colorpicker",
    show: false // default: true
})

10. Determine whether or not to at all times present the colour picker.

var xncolorpicker = new XNColorPicker({
    selector: "#colorpicker",
    alwaysShow: true
})

11. Determine whether or not the colour picker is draggable.

var xncolorpicker = new XNColorPicker({
    selector: "#colorpicker",
    canMove: true
})

12. Determine whether or not or to not mechanically affirm the choice.

var xncolorpicker = new XNColorPicker({
    selector: "#colorpicker",
    autoConfirm: true
})

13. Event handlers.

var xncolorpicker = new XNColorPicker({
    onError: function (e) {
      // do something
    },
    onCancel:function(color){
      console.log("cancel",color)
    },
    onChange:function(color){
      console.log("change",color)
    },
    onConfirm:function(color){
      console.log("confirm",color)
    }
})

Feature-rich Color & Gradient Picker, xncolorpicker Plugin/Github

See Demo And Download