How to Use WordPress Color Picker API in Custom Post Type Metabox

I have a Custom Post Type called “Banner” which has a custom Meta box with two advanced fields “Title” (text Field) and “Color” (color Picker).
Can you please let me know how to use the WP Color Picker API in field of color? here is my code for doing the job for the first field but confused how to develop second part!

<?php
add_action( 'add_meta_boxes', 'banner_mtbox' );
function banner_mtbox() {
$post_types = array ( 'bannerCPT');
 foreach( $post_types as $post_type ){
    add_meta_box(
        "banner-text",
        "Banner Details ",
        "render_banner_mtbox",
        $post_type,
        "normal",
        "high"
    );
    }

function render_banner_mtbox( $post )
{
 $bannerVal = get_post_custom( $post->ID );
 $bannerTitle = isset( $bannerVal['title_box'] ) ? esc_attr(   $bannerVal['title_box'][0] ) : '
 ?>
 <label for="title_box">Enter Title : </label>
 <input type="text" name="title_box" id="title_box" value="<?php echo $bannerTitle; ?>" />
<?php
}
add_action( 'save_post', 'banner_mtbox_save' );
function banner_mtbox_save( $post_id )
{

if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if( !isset( $_POST['banner_mtbox_nonce'] ) || !wp_verify_nonce( $_POST['banner_mtbox_nonce'], 'banner_mtbox_nonce' ) ) return;
if( !current_user_can( 'edit_post' ) ) return;

$allowed = array( 
    'a' => array( // on allow a tags
        'href' => array() // and those anchords can only have href attribute
    )
);


if( isset( $_POST['title_box'] ) ){
    update_post_meta( $post_id, 'title_box', wp_kses( $_POST['title_box'], $allowed ) );
  }
 }
?>

Thanks,

I’ve created a metabox once with color picker. You need to include color picker style and script in your admin_enqueue_scripts hook, and then initialize it with

$('.color-picker').wpColorPicker();

From my gist:

<?php
add_action( 'admin_enqueue_scripts', 'mytheme_backend_scripts');
if ( ! function_exists( 'mytheme_backend_scripts' ) ){
    function mytheme_backend_scripts($hook) {
        wp_enqueue_media();
        wp_enqueue_style( 'wp-color-picker');
        wp_enqueue_script( 'wp-color-picker');
    }
}
add_action( 'add_meta_boxes', 'mytheme_add_meta_box' );
if ( ! function_exists( 'mytheme_add_meta_box' ) ){
    function mytheme_add_meta_box(){
        add_meta_box( 'header-page-metabox-options', esc_html__('Header Color', 'mytheme' ), 'mytheme_header_meta_box', 'page', 'side', 'low');
    }
}
if ( ! function_exists( 'mytheme_header_meta_box' ) ){
    function mytheme_header_meta_box( $post ){
        $custom = get_post_custom( $post->ID );
        $header_color = (isset($custom["header_color"][0])) ? $custom["header_color"][0] : '';
        wp_nonce_field( 'mytheme_header_meta_box', 'mytheme_header_meta_box_nonce' );
        ?>
        <style type="text/css">
            .hidden{display: none;}
            .pagebox .separator{padding-top: 20px;margin-top: 20px;border-top: 1px solid #ddd;}
        </style>
        <script>
            $('.color-field').each(function(){
                    $(this).wpColorPicker();
            });
        </script>
        <div class="pagebox">

            <p class="separator">
                <h4><?php esc_attr_e('Header Color', 'mytheme' ); ?></h4>
                <input class="color-field" type="text" name="header_color" value="<?php esc_attr_e($header_color); ?>"/>
            </p>
        </div>
        <?php
    }
}
if ( ! function_exists( 'mytheme_save_header_meta_box' ) ){
    function mytheme_save_header_meta_box( $post_id ){
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
            return;
        }
        if( !current_user_can( 'edit_pages' ) ) {
            return;
        }
        if ( !isset( $_POST['header_color'] ) || !wp_verify_nonce( $_POST['mytheme_header_meta_box_nonce'], 'mytheme_header_meta_box' ) ) {
            return;
        }
        $header_color = (isset($_POST["header_color"]) && $_POST["header_color"]!='') ? $_POST["header_color"] : '';
        update_post_meta($post_id, "header_color", $header_color);
    }
}
add_action( 'save_post', 'mytheme_save_header_meta_box' );