Multiple color picker in wordpress metabox not saving

I am following this article: http://javatechig.com/wordpress/how-to-implement-color-picker-with-wordpress on how to put color picker in my metabox, and it’s showing allright, but when I try to save it, nothing is saved. Weird thing is that I tried this on one site, and basically copy pasted this entire procedure, and it worked. This time I need 2 color inputs. So I created my metabox and save form:

<?php 

if ( ! function_exists( 'Theme_add_meta_box' ) ){
    function Theme_add_meta_box(){
        add_meta_box( 'breadcrumbs-image-page-metabox-options', esc_html__('Breadcrumbs Image', 'Theme' ), 'Theme_breadcrumbs_image_meta_box', 'page', 'side', 'low');
    }
}
add_action( 'add_meta_boxes', 'Theme_add_meta_box' );

if ( ! function_exists( 'Theme_breadcrumbs_image_meta_box' ) ){
    function Theme_breadcrumbs_image_meta_box( $post ){
        $custom = get_post_custom( $post->ID );
        $breadcrumbs_image = (isset($custom["breadcrumbs_image"][0])) ? $custom["breadcrumbs_image"][0] : '';
        $headline_color = (isset($custom["headline_color"][0])) ? $custom["headline_color"][0] : '';
        $breadcrumbs_color = (isset($custom["breadcrumbs_color"][0])) ? $custom["breadcrumbs_color"][0] : '';

        ?>
        <style type="text/css">
            .hidden{display: none;}
            .postbox .separator{padding-top: 20px;margin-top: 20px;border-top: 1px solid #ddd;}
        </style>
        <p>
            <input id="Theme_breadcrumbs_image_input" type="hidden" name="breadcrumbs_image" value="<?php echo $breadcrumbs_image; ?>"/>
            <a title="<?php esc_html_e('Add Breadcrumbs Image', 'Theme'); ?>" href="#" id="add-post-breadcrumbs_image">
            <?php
                if(isset($custom["breadcrumbs_image"][0]) ){
                    echo '<img width="254" src="'.$breadcrumbs_image.'" />';
                } else{
                    esc_html_e('Add Breadcrumbs Image', 'Theme');
                } ?></a>
            <?php
                if (!isset($custom["breadcrumbs_image"][0])) {
                    echo '<a title="'.esc_html__('Remove Breadcrumbs Image', 'Theme').'" href="#" id="remove-post-breadcrumbs_image" class="hidden">'.esc_html__('Remove Breadcrumbs Image', 'Theme').'</a>';
                } else{
                    echo '<a title="'.esc_html__('Remove Breadcrumbs Image', 'Theme').'" href="#" id="remove-post-breadcrumbs_image" >'.esc_html__('Remove Breadcrumbs Image', 'Theme').'</a>';
                }
            ?>
        </p>
        <p class="separator">
        <h4><?php esc_attr_e('Headline Color', 'Theme' ); ?></h4>
            <input class="color-field" type="text" name="headline_color" value="<?php echo '#'.$headline_color; ?>"/>
        <h4><?php esc_attr_e('Breadcrumbs Color', 'Theme' ); ?></h4>
            <input class="color-field" type="text" name="breadcrumbs_color" value="<?php echo '#'.$breadcrumbs_color; ?>"/>
        </p>
        <?php
    }
}

if ( ! function_exists( 'Theme_save_breadcrumbs_image_meta_box' ) ){
    function Theme_save_breadcrumbs_image_meta_box( $post ){
        if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ){
            return;
        }
        $breadcrumbs_image = (isset($_POST["breadcrumbs_image"])) ? $_POST["breadcrumbs_image"] : '';
        update_post_meta($post->ID, "breadcrumbs_image", $breadcrumbs_image);

        $headline_color = (isset($_POST["headline_color"])) ? $_POST["headline_color"] : '';
        update_post_meta($post->ID, "headline_color", $headline_color);

        $breadcrumbs_color = (isset($_POST["breadcrumbs_color"])) ? $_POST["breadcrumbs_color"] : '';
        update_post_meta($post->ID, "breadcrumbs_color", $breadcrumbs_color);

    }
}

add_action( 'save_post', 'Theme_save_breadcrumbs_image_meta_box' );

I have image upload in as well, and it’s working as it should.

I initialized my colorpicker in javascript

 $('.color-field').each(function(){
     $(this).wpColorPicker();
 });

I actually added .each to see if the initialization needs to be separate per input field but there was no difference even when I put this

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

I also enqueued colorpicker

wp_enqueue_style( 'wp-color-picker');
wp_enqueue_script( 'wp-color-picker');

in my functions.php where my admin scripts are enqueued.

I can choose color, I see the color pickers, and when I go to save them, nothing happens : I get empty color pickers when the page refreshes. Image upload works fine (I didn’t include the js code for it here, but it works, and saves).

So what am I missing?