How can I show/add/save custom metaboxes as an Array of values?

You just have to modify the name attribute of the generated input fields from p_clr to p_clr[]. $_POST['p_clr'] will then be an array with the values of all the input fields.

public function prod_colors_box() {
        global $post, $p_clr;
$p_clr = array();
        $p_clrs = get_post_meta( $post->ID, 'p_clr' );
?>

<div id="p_colors">
    <?php foreach( $p_clrs as $key => $p_clr ) { ?>
    <p>
        <label for="p_clr_<?php echo $key; ?>">
        <strong>Color:</strong> <input id="p_clr_<?php echo $key; ?>" name="p_clr[]" value="<?php echo $p_clr; ?>" />
        </label>
    </p>
    <?php } ?>
</div>
    <h4><a href="#" id="addClr">Add Another Color</a></h4>

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(function() {

    var clrDiv = $('#p_colors');
    var j = $('#p_colors p').size() + 1;

    $('#addClr').live('click', function() {
        $('<p><label for="p_clr_' + j + '"><strong>Color:</strong> <input id="p_clr_' + j + '" name="p_clr[]" size="20" value="<?php echo $p_clrs; ?>" /></label> <a href="#" id="remClr">Remove</a></p>').appendTo(clrDiv);
        j++;
        return false;
    });
    $('#remClr').live('click', function() { 
        if( j > 2 ) {
            $(this).parents('p').remove(); 
            j--;
        } return false; 
    });
});
</script>