How to add wordpress color picker in custom plugin development

WordPress has added a color picker in the core code from WordPress v3.5.Plugin developers can now take advantage of this and add a color picker easily in their plugin

How to Add Color Picker

Step 1) Create a java script named as color-script.js and place this code:

jQuery(document).ready(function($){
var myOptions = {
// you can declare a default color here,
// or in the data-default-color attribute on the input
defaultColor: false,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
// or, supply an array of colors to customize further
palettes: true
};
$('.my-color-field').wpColorPicker(myOptions);
});

Step 2) Enqueue the “wp-color-picker” jquery script

add_action( 'admin_enqueue_scripts', 'mw_enqueue_color_picker' );
function mw_enqueue_color_picker( $hook_suffix ) {
// first check that $hook_suffix is appropriate for your admin page
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'my-script-handle', plugins_url('js/color-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}

My plugin now has a color-script.js file that has declared wp-color-picker as a dependency. We can now use the wpColorPicker jQuery method inside it.

Step 3) Add an input (example: text input) to the interface where you want the color picker

<input type="text" value="#abc" class="my-color-field"/>

You can also specify a default color for the field (this will be selected by default):

<input type="text" value="#bada55" data-default-color="#abc" class="my-color-field"/>

That’s it. Your users will now be able to choose a color from the color picker

Have any doubt, then comment here!