Feature-rich Color & Gradient Picker In JavaScript – xncolorpicker

Preview:

Description:

xncolorpicker is a beautiful, feature-rich, JavaScript-powered color & gradient picker component for the web.

Features:

• Supports RGBA, HEX, and HSLA color formats.
• Supports both Linear and Radial gradients.
• Allows you to customize the preset colors.
• Automatically saves your preferred colors to the palette.
• Useful callbacks to handle color changes.

How to use it:

1. Create a container to hold the trigger of the color picker.

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

2. Load the xncolorpicker plugin in the document.

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

3. Call the plugin on the container element.

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

4. Apply styles to the trigger element.

#colorpicker {
  /* your styles here */
}

‘

5. Set the color format you prefer: ‘rgba’, ‘hex’, or ‘hsla’.

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

6. Customize the preset colors.

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 a history of the recent colors that you picked.

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

8. Determine whether to show the palette.

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

9. Determine whether to show the color picker on page load.

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

10. Determine whether to always show the color picker.

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

11. Determine whether the color picker is draggable.

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

12. Determine whether or not to automatically confirm the selection. Default: false.

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