Press "Enter" to skip to content

Beautiful Color Picker Supports Gradient Mode | xncolorpicker

Beautiful color picker, supports color gradient mode, rgba hex hsla three-color formats, supports historical colors, preset colors, supports custom input, only based on jquery, colorPicker.

xncolorpicker is a beautiful, feature-rich color and gradient picker component supported by JavaScript for the web.

gradient color picker, color picker from image, figma color picker shortcut, rgba color picker from image, color picker from screen, rgb color picker, css color picker

Features:

  • Supports RGBA, HEX, and HSLA color formats.
  • Supports both linear and diagonal gradients.
  • It allows you to customize pre-set colors.
  • It automatically saves your favorite colors to the palette.
  • Callbacks are useful for dealing with color changes.

How to make use of it:

1. Create a container to carry the set off of the color 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 color 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 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

Official Website(fanaiai): Click Here

This superior jQuery/javascript plugin is developed by fanaiai. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.