Code from meta box tutorial: http://themefoundation.com/wordpress-meta-boxes-guide/

color.js

jQuery(document).ready(function($){
    $('.meta-color').wpColorPicker();
});

example-metaboxes.php

<?php
/**
 * Adds a meta box to the post editing screen
 */
function example_custom_meta() {
    add_meta_box( 'example_meta', __( 'Example Title', 'example-meta' ), 'example_meta_callback', 'post' );
} // end example_custom_meta()
add_action( 'add_meta_boxes', 'example_custom_meta' );


/**
 * Outputs the content of the metabox
 */
function example_meta_callback( $post ) {
    wp_nonce_field( basename( __FILE__ ), 'example_nonce' );

    // TODO: This should be set to '' if get_post_meta( $post->ID ); is empty.
    $example_stored_meta = get_post_meta( $post->ID );
    ?>
 
    <p>
        <label for="meta-text" class="example-row-title"><?php _e( 'Example Text Input', 'example-meta' )?></label>
        <input type="text" name="meta-text" id="meta-text" value="<?php if ( isset ( $example_stored_meta['meta-text'] ) ) echo $example_stored_meta['meta-text'][0]; ?>" />
    </p>

    <p>
	    <span class="example-row-title"><?php _e( 'Example Checkbox Input', 'example-meta' )?></span>
	    <div class="example-row-content">
	        <label for="meta-checkbox">
	            <input type="checkbox" name="meta-checkbox" id="meta-checkbox" value="yes" <?php if ( isset ( $example_stored_meta['meta-checkbox'] ) ) checked( $example_stored_meta['meta-checkbox'][0], 'yes' ); ?> />
	            <?php _e( 'Checkbox label', 'example-meta' )?>
	        </label>
	        <label for="meta-checkbox-two">
	            <input type="checkbox" name="meta-checkbox-two" id="meta-checkbox-two" value="yes" <?php if ( isset ( $example_stored_meta['meta-checkbox-two'] ) ) checked( $example_stored_meta['meta-checkbox-two'][0], 'yes' ); ?> />
	            <?php _e( 'Another checkbox', 'example-meta' )?>
	        </label>
	    </div>
	</p>

	<p>
	    <span class="example-row-title"><?php _e( 'Example Radio Buttons', 'example-meta' )?></span>
	    <div class="example-row-content">
	        <label for="meta-radio-one">
	            <input type="radio" name="meta-radio" id="meta-radio-one" value="radio-one" <?php if ( isset ( $example_stored_meta['meta-radio'] ) ) checked( $example_stored_meta['meta-radio'][0], 'radio-one' ); ?>>
	            <?php _e( 'Radio Option #1', 'example-meta' )?>
	        </label>
	        <label for="meta-radio-two">
	            <input type="radio" name="meta-radio" id="meta-radio-two" value="radio-two" <?php if ( isset ( $example_stored_meta['meta-radio'] ) ) checked( $example_stored_meta['meta-radio'][0], 'radio-two' ); ?>>
	            <?php _e( 'Radio Option #2', 'example-meta' )?>
	        </label>
	    </div>
	</p>

	<p>
	    <label for="meta-select" class="example-row-title"><?php _e( 'Example Select Input', 'example-meta' )?></label>
	    <select name="meta-select" id="meta-select">
	        <option value="select-one" <?php if ( isset ( $example_stored_meta['meta-select'] ) ) selected( $example_stored_meta['meta-select'][0], 'select-one' ); ?>><?php _e( 'One', 'example-meta' )?></option>';
	        <option value="select-two" <?php if ( isset ( $example_stored_meta['meta-select'] ) ) selected( $example_stored_meta['meta-select'][0], 'select-two' ); ?>><?php _e( 'Two', 'example-meta' )?></option>';
	    </select>
	</p>

	<p>
	    <label for="meta-textarea" class="example-row-title"><?php _e( 'Example Textarea Input', 'example-meta' )?></label>
	    <textarea name="meta-textarea" id="meta-textarea"><?php if ( isset ( $example_stored_meta['meta-textarea'] ) ) echo $example_stored_meta['meta-textarea'][0]; ?></textarea>
	</p>

	<p>
	    <label for="meta-color" class="example-row-title"><?php _e( 'Color Picker', 'example-meta' )?></label>
	    <input name="meta-color" type="text" value="<?php if ( isset ( $example_stored_meta['meta-color'] ) ) echo $example_stored_meta['meta-color'][0]; ?>" class="meta-color" />
	</p>

	<p>
	    <label for="meta-image" class="example-row-title"><?php _e( 'Example File Upload', 'example-meta' )?></label>
	    <input type="text" name="meta-image" id="meta-image" value="<?php if ( isset ( $example_stored_meta['meta-image'] ) ) echo $example_stored_meta['meta-image'][0]; ?>" />
	    <input type="button" id="meta-image-button" class="button" value="<?php _e( 'Choose or Upload an Image', 'example-meta' )?>" />
	</p>
 
    <?php
} // end example_meta_callback()


/**
 * Saves the custom meta input
 */
function example_meta_save( $post_id ) {
 
    // Checks save status
    $is_autosave = wp_is_post_autosave( $post_id );
    $is_revision = wp_is_post_revision( $post_id );
    $is_valid_nonce = ( isset( $_POST[ 'example_nonce' ] ) && wp_verify_nonce( $_POST[ 'example_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';
 
    // Exits script depending on save status
    if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
        return;
    }
 
    // Checks for input and sanitizes/saves if needed
    if( isset( $_POST[ 'meta-text' ] ) ) {
        update_post_meta( $post_id, 'meta-text', sanitize_text_field( $_POST[ 'meta-text' ] ) );
    }

	// Checks for input and saves
	if( isset( $_POST[ 'meta-checkbox' ] ) ) {
	    update_post_meta( $post_id, 'meta-checkbox', 'yes' );
	} else {
	    update_post_meta( $post_id, 'meta-checkbox', '' );
	}
	 
	// Checks for input and saves
	if( isset( $_POST[ 'meta-checkbox-two' ] ) ) {
	    update_post_meta( $post_id, 'meta-checkbox-two', 'yes' );
	} else {
	    update_post_meta( $post_id, 'meta-checkbox-two', '' );
	}

	// Checks for input and saves if needed
	if( isset( $_POST[ 'meta-radio' ] ) ) {
	    update_post_meta( $post_id, 'meta-radio', $_POST[ 'meta-radio' ] );
	}

	// Checks for input and saves if needed
	if( isset( $_POST[ 'meta-select' ] ) ) {
	    update_post_meta( $post_id, 'meta-select', $_POST[ 'meta-select' ] );
	}

	// Checks for input and saves if needed
	if( isset( $_POST[ 'meta-textarea' ] ) ) {
	    update_post_meta( $post_id, 'meta-textarea', $_POST[ 'meta-textarea' ] );
	}

	// Checks for input and saves if needed
	if( isset( $_POST[ 'meta-color' ] ) ) {
	    update_post_meta( $post_id, 'meta-color', $_POST[ 'meta-color' ] );
	}

	// Checks for input and saves if needed
	if( isset( $_POST[ 'meta-image' ] ) ) {
	    update_post_meta( $post_id, 'meta-image', $_POST[ 'meta-image' ] );
	}

} // end example_meta_save()
add_action( 'save_post', 'example_meta_save' );

load-js.php

<?php
/**
 * Loads the image management javascript
 */
function example_image_enqueue() {
    global $typenow;
    if( $typenow == 'post' ) {
        wp_enqueue_media();
 
        // Registers and enqueues the required javascript.
        wp_enqueue_script( 'meta-image', get_stylesheet_directory_uri() . '/meta-image.js', array( 'jquery' ) );
        wp_localize_script( 'meta-image', 'meta_image',
            array(
                'title'  => __( 'Choose or Upload an Image', 'example-meta' ),
                'button' => __( 'Use this image', 'example-meta' ),
            )
        );
    } // End if
} // End example_image_enqueue()
add_action( 'admin_enqueue_scripts', 'example_image_enqueue' );

/**
 * Loads the color picker javascript
 */
function example_color_enqueue() {
    global $typenow;
    if( $typenow == 'post' ) {
        wp_enqueue_style( 'wp-color-picker' );
        wp_enqueue_script( 'meta-color-js', get_stylesheet_directory_uri() . '/meta-color.js', array( 'wp-color-picker' ) );
    } 
} // End example_color_enqueue()
add_action( 'admin_enqueue_scripts', 'example_color_enqueue' );

media.js

/*
 * Attaches the image uploader to the input field
 */
jQuery(document).ready(function($){
 
    // Instantiates the variable that holds the media library frame.
    var meta_image_frame;
 
    // Runs when the image button is clicked.
    $('#meta-image-button').click(function(e){
 
        // Prevents the default action from occuring.
        e.preventDefault();
 
        // If the frame already exists, re-open it.
        if ( meta_image_frame ) {
            meta_image_frame.open();
            return;
        }
 
        // Sets up the media library frame
        meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
            title: meta_image.title,
            button: { text:  meta_image.button },
            library: { type: 'image' }
        });
 
        // Runs when an image is selected.
        meta_image_frame.on('select', function(){
 
            // Grabs the attachment selection and creates a JSON representation of the model.
            var media_attachment = meta_image_frame.state().get('selection').first().toJSON();
 
            // Sends the attachment URL to our custom image input field.
            $('#meta-image').val(media_attachment.url);
        });
 
        // Opens the media library frame.
        meta_image_frame.open();
    });
});