Index: wp-includes/class-wp-customize-control.php
===================================================================
--- wp-includes/class-wp-customize-control.php	(revision 21626)
+++ wp-includes/class-wp-customize-control.php	(working copy)
@@ -351,8 +351,8 @@
 	 * @since 3.4.0
 	 */
 	public function enqueue() {
-		wp_enqueue_script( 'farbtastic' );
-		wp_enqueue_style( 'farbtastic' );
+		wp_enqueue_script( 'wp-color-picker' );
+		wp_enqueue_style( 'wp-color-picker' );
 	}
 
 	/**
@@ -372,19 +372,15 @@
 	 * @since 3.4.0
 	 */
 	public function render_content() {
+		$this_default = $this->setting->default;
+		if ( strpos( $this_default, '#' ) === false )
+			$this_default = '#' . $this_default;
 		?>
 		<label>
 			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
 			<div class="customize-control-content">
-				<div class="dropdown">
-					<div class="dropdown-content">
-						<div class="dropdown-status"></div>
-					</div>
-					<div class="dropdown-arrow"></div>
-				</div>
-				<input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e('Hex Value'); ?>" />
+				<input class="color-picker-hex" type="text" value="<?php echo esc_html( $this_default ); ?>" maxlength="7" placeholder="<?php esc_attr_e('Hex Value'); ?>" />
 			</div>
-			<div class="farbtastic-placeholder"></div>
 		</label>
 		<?php
 	}
Index: wp-includes/script-loader.php
===================================================================
--- wp-includes/script-loader.php	(revision 21626)
+++ wp-includes/script-loader.php	(working copy)
@@ -402,6 +402,18 @@
 
 		$scripts->add( 'farbtastic', '/wp-admin/js/farbtastic.js', array('jquery'), '1.2' );
 
+		$iris_deps = array( 'jquery-ui-draggable', 'jquery-ui-slider' );
+		if ( wp_is_mobile() )
+			$iris_deps[] = 'touch-punch';
+		$scripts->add( 'iris', '/wp-admin/js/iris.min.js', $iris_deps, false, 1 );
+
+		$scripts->add( 'wp-color-picker', "/wp-admin/js/wp-color-picker$suffix.js", array( 'iris' ), false, 1 );
+		did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array(
+			'clear' => __( 'Clear' ),
+			'defaultString' => __( 'Default' ),
+			'pick' => __( 'Select Color' )
+		));
+
 		$scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 );
 
 		$scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" );
@@ -429,7 +441,7 @@
 			'saveAlert' => __('The changes you made will be lost if you navigate away from this page.')
 		) );
 
-		$scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('farbtastic'), false, 1 );
+		$scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('wp-color-picker'), false, 1 );
 		$scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );
 	}
 }
@@ -482,6 +494,7 @@
 	$styles->add( 'install', "/wp-admin/css/install$suffix.css" );
 	$styles->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.css' );
 	$styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.3u1' );
+	$styles->add( 'wp-color-picker', '/wp-admin/css/wp-color-picker.css' );
 	$styles->add( 'jcrop', '/wp-includes/js/jcrop/jquery.Jcrop.css', array(), '0.9.8' );
 	$styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.8' );
 	$styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css" );
Index: wp-content/themes/twentyeleven/inc/theme-options.php
===================================================================
--- wp-content/themes/twentyeleven/inc/theme-options.php	(revision 21626)
+++ wp-content/themes/twentyeleven/inc/theme-options.php	(working copy)
@@ -17,8 +17,8 @@
  */
 function twentyeleven_admin_enqueue_scripts( $hook_suffix ) {
 	wp_enqueue_style( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.css', false, '2011-04-28' );
-	wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js', array( 'farbtastic' ), '2011-06-10' );
-	wp_enqueue_style( 'farbtastic' );
+	wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js', array( 'wp-color-picker' ), '2011-06-10' ); 
+ 	wp_enqueue_style( 'wp-color-picker' ); 
 }
 add_action( 'admin_print_styles-appearance_page_theme_options', 'twentyeleven_admin_enqueue_scripts' );
 
@@ -268,12 +268,8 @@
 function twentyeleven_settings_field_link_color() {
 	$options = twentyeleven_get_theme_options();
 	?>
-	<input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
-	<a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
-	<input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" />
-	<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
-	<br />
-	<span><?php printf( __( 'Default color: %s', 'twentyeleven' ), '<span id="default-color">' . twentyeleven_get_default_link_color( $options['color_scheme'] ) . '</span>' ); ?></span>
+	<?php $default_color = 'data-default-color="' . twentyeleven_get_default_link_color( $options['color_scheme'] ) . '"'; ?>  
+ 	<input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" <?php echo $default_color ?>/>
 	<?php
 }
 
Index: wp-content/themes/twentyeleven/inc/theme-options.js
===================================================================
--- wp-content/themes/twentyeleven/inc/theme-options.js	(revision 21626)
+++ wp-content/themes/twentyeleven/inc/theme-options.js	(working copy)
@@ -1,52 +1,12 @@
-var farbtastic;
-
 (function($){
-	var pickColor = function(a) {
-		farbtastic.setColor(a);
-		$('#link-color').val(a);
-		$('#link-color-example').css('background-color', a);
-	};
-
 	$(document).ready( function() {
-		$('#default-color').wrapInner('<a href="#" />');
-
-		farbtastic = $.farbtastic('#colorPickerDiv', pickColor);
-
-		pickColor( $('#link-color').val() );
-
-		$('.pickcolor').click( function(e) {
-			$('#colorPickerDiv').show();
-			e.preventDefault();
-		});
-
-		$('#link-color').keyup( function() {
-			var a = $('#link-color').val(),
-				b = a;
-
-			a = a.replace(/[^a-fA-F0-9]/, '');
-			if ( '#' + a !== b )
-				$('#link-color').val(a);
-			if ( a.length === 3 || a.length === 6 )
-				pickColor( '#' + a );
-		});
-
-		$(document).mousedown( function() {
-			$('#colorPickerDiv').hide();
-		});
-
-		$('#default-color a').click( function(e) {
-			pickColor( '#' + this.innerHTML.replace(/[^a-fA-F0-9]/, '') );
-			e.preventDefault();
-		});
-
+		$('#link-color').wpColorPicker();
 		$('.image-radio-option.color-scheme input:radio').change( function() {
-			var currentDefault = $('#default-color a'),
+			var currentDefault = $('#link-color').attr('data-default-color'),
 				newDefault = $(this).next().val();
-
-			if ( $('#link-color').val() == currentDefault.text() )
-				pickColor( newDefault );
-
-			currentDefault.text( newDefault );
+			
+			if ( $('#link-color').val() == currentDefault.toString() )
+				$("#link-color").iris("option", "color", newDefault )
 		});
 	});
 })(jQuery);
\ No newline at end of file
Index: wp-admin/js/custom-background.js
===================================================================
--- wp-admin/js/custom-background.js	(revision 21626)
+++ wp-admin/js/custom-background.js	(working copy)
@@ -1,66 +1,24 @@
-var farbtastic, pickColor;
-
 (function($) {
 
-	var defaultColor = '';
-
-	pickColor = function(color) {
-		farbtastic.setColor(color);
-		$('#background-color').val(color);
-		$('#custom-background-image').css('background-color', color);
-		// If we have a default color, and they match, then we need to hide the 'Default' link.
-		// Otherwise, we hide the 'Clear' link when it is empty.
-		if ( ( defaultColor && color === defaultColor ) || ( ! defaultColor && ( '' === color || '#' === color ) ) )
-			$('#clearcolor').hide();
-		else
-			$('#clearcolor').show();
-	}
-
 	$(document).ready(function() {
+		var bgImage = $("#custom-background-image");
 
-		defaultColor = $('#defaultcolor').val();
-
-		$('#pickcolor').click(function() {
-			$('#colorPickerDiv').show();
-			return false;
+		$('#background-color').wpColorPicker({
+			change: function( event, ui ) {
+				bgImage.css('background-color', ui.color.toString());
+			},
+			clear: function() {
+				bgImage.css('background-color', '');
+			}
 		});
 
-		$('#clearcolor a').click( function(e) {
-			pickColor( defaultColor );
-			e.preventDefault();
-		});
-
-		$('#background-color').keyup(function() {
-			var _hex = $('#background-color').val(), hex = _hex;
-			if ( hex.charAt(0) != '#' )
-				hex = '#' + hex;
-			hex = hex.replace(/[^#a-fA-F0-9]+/, '');
-			if ( hex != _hex )
-				$('#background-color').val(hex);
-			if ( hex.length == 4 || hex.length == 7 )
-				pickColor( hex );
-		});
-
 		$('input[name="background-position-x"]').change(function() {
-			$('#custom-background-image').css('background-position', $(this).val() + ' top');
+			bgImage.css('background-position', $(this).val() + ' top');
 		});
 
 		$('input[name="background-repeat"]').change(function() {
-			$('#custom-background-image').css('background-repeat', $(this).val());
+			bgImage.css('background-repeat', $(this).val());
 		});
-
-		farbtastic = $.farbtastic('#colorPickerDiv', function(color) {
-			pickColor(color);
-		});
-		pickColor($('#background-color').val());
-
-		$(document).mousedown(function(){
-			$('#colorPickerDiv').each(function(){
-				var display = $(this).css('display');
-				if ( display == 'block' )
-					$(this).fadeOut(2);
-			});
-		});
 	});
 
 })(jQuery);
\ No newline at end of file
Index: wp-admin/js/customize-controls.js
===================================================================
--- wp-admin/js/customize-controls.js	(revision 21626)
+++ wp-admin/js/customize-controls.js	(working copy)
@@ -109,27 +109,21 @@
 	api.ColorControl = api.Control.extend({
 		ready: function() {
 			var control = this,
-				rhex, spot, input, text, update;
+				rhex, input;
 
 			rhex   = /^#([A-Fa-f0-9]{3}){0,2}$/;
-			spot   = this.container.find('.dropdown-content');
 			input  = new api.Element( this.container.find('.color-picker-hex') );
-			update = function( color ) {
-				spot.css( 'background', color );
-				control.farbtastic.setColor( color );
-			};
-
-			this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), control.setting.set );
-
+			
+			this.container.find('.color-picker-hex').wpColorPicker({ 
+				change: function( event, options ) {
+                    control.setting.set( options.color.toCSS() );
+                }
+			});
+			
 			// Only pass through values that are valid hexes/empty.
 			input.sync( this.setting ).validate = function( to ) {
 				return rhex.test( to ) ? to : null;
 			};
-
-			this.setting.bind( update );
-			update( this.setting() );
-
-			this.dropdownInit();
 		}
 	});
 
Index: wp-admin/custom-header.php
===================================================================
--- wp-admin/custom-header.php	(revision 21626)
+++ wp-admin/custom-header.php	(working copy)
@@ -175,7 +175,7 @@
 			wp_enqueue_script( 'media-upload' );
 			wp_enqueue_script( 'custom-header' );
 			if ( current_theme_supports( 'custom-header', 'header-text' ) )
-				wp_enqueue_script('farbtastic');
+				wp_enqueue_script('wp-color-picker');
 		} elseif ( 2 == $step ) {
 			wp_enqueue_script('imgareaselect');
 		}
@@ -190,7 +190,7 @@
 		$step = $this->step();
 
 		if ( ( 1 == $step || 3 == $step ) && current_theme_supports( 'custom-header', 'header-text' ) )
-			wp_enqueue_style('farbtastic');
+			wp_enqueue_style('wp-color-picker');
 		elseif ( 2 == $step )
 			wp_enqueue_style('imgareaselect');
 	}
@@ -332,7 +332,6 @@
 	function js_1() { ?>
 <script type="text/javascript">
 /* <![CDATA[ */
-var farbtastic;
 (function($){
 	var default_color = '#<?php echo get_theme_support( 'custom-header', 'default-text-color' ); ?>',
 		header_text_fields;
@@ -341,7 +340,6 @@
 		$('#name').css('color', color);
 		$('#desc').css('color', color);
 		$('#text-color').val(color);
-		farbtastic.setColor(color);
 	}
 
 	function toggle_text() {
@@ -361,42 +359,16 @@
 
 	$(document).ready(function() {
 		header_text_fields = $('.displaying-header-text');
-		$('#pickcolor').click(function(e) {
-			e.preventDefault();
-			$('#color-picker').show();
+		$('#text-color').wpColorPicker({
+			change: function( event, ui ) {
+				pickColor( ui.color.toString() );
+			}
 		});
-
 		$('#display-header-text').click( toggle_text );
-
-		$('#defaultcolor').click(function() {
-			pickColor(default_color);
-			$('#text-color').val(default_color);
+		$('#defaultcolor').click(function() { 
+			pickColor( default_color ); 
 		});
-
-		$('#text-color').keyup(function() {
-			var _hex = $('#text-color').val();
-			var hex = _hex;
-			if ( hex[0] != '#' )
-				hex = '#' + hex;
-			hex = hex.replace(/[^#a-fA-F0-9]+/, '');
-			if ( hex != _hex )
-				$('#text-color').val(hex);
-			if ( hex.length == 4 || hex.length == 7 )
-				pickColor( hex );
-		});
-
-		$(document).mousedown(function(){
-			$('#color-picker').each( function() {
-				var display = $(this).css('display');
-				if (display == 'block')
-					$(this).fadeOut(2);
-			});
-		});
-
-		farbtastic = $.farbtastic('#color-picker', function(color) { pickColor(color); });
-		<?php if ( display_header_text() ) { ?>
-		pickColor('#<?php echo get_header_textcolor(); ?>');
-		<?php } else { ?>
+		<?php if ( !display_header_text() ) { ?> 
 		toggle_text();
 		<?php } ?>
 	});
@@ -646,15 +618,10 @@
 <tr valign="top" class="displaying-header-text">
 <th scope="row"><?php _e( 'Text Color' ); ?></th>
 <td>
-	<p>
-<?php if ( display_header_text() ) : ?>
-		<input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( get_header_textcolor() ); ?>" />
-<?php else : ?>
-		<input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ); ?>" />
-<?php endif; ?>
-		<a href="#" class="hide-if-no-js" id="pickcolor"><?php _e( 'Select a Color' ); ?></a>
+	<p> 
+<?php $header_textcolor = ( display_header_text() ) ? esc_attr( get_header_textcolor() ) : esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ); ?> 
+<input type="text" name="text-color" id="text-color" value="#<?php echo $header_textcolor; ?>" /> 
 	</p>
-	<div id="color-picker" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
 </td>
 </tr>
 
Index: wp-admin/css/customize-controls-rtl.css
===================================================================
--- wp-admin/css/customize-controls-rtl.css	(revision 21626)
+++ wp-admin/css/customize-controls-rtl.css	(working copy)
@@ -65,8 +65,7 @@
 	margin-left: 5px;
 }
 
-.customize-section input[type="text"].color-picker-hex,
-.customize-control-color .farbtastic-placeholder {
+.customize-section input[type="text"].color-picker-hex {
 	float: right;
 }
 
Index: wp-admin/css/customize-controls.css
===================================================================
--- wp-admin/css/customize-controls.css	(revision 21626)
+++ wp-admin/css/customize-controls.css	(working copy)
@@ -314,13 +314,11 @@
 /*
  * Color Picker
  */
-.customize-control-color .color-picker-hex,
-.customize-control-color .farbtastic-placeholder {
+.customize-control-color .color-picker-hex {
 	display: none;
 }
 
-.customize-control-color.open .color-picker-hex,
-.customize-control-color.open .farbtastic-placeholder {
+.customize-control-color.open .color-picker-hex {
 	display: block;
 }
 
@@ -339,7 +337,6 @@
 }
 
 .customize-section input[type="text"].color-picker-hex {
-	float: left;
 	width: 85px;
 	font-family: monospace;
 	text-align: center;
@@ -353,16 +350,6 @@
 	color: #999;
 }
 
-.customize-control-color .farbtastic-placeholder {
-	width: 100%;
-	margin: 5px 0 10px;
-	float: left;
-}
-
-.customize-control-color .farbtastic {
-	margin: 0 auto;
-}
-
 /*
  * Image Picker
  */
Index: wp-admin/custom-background.php
===================================================================
--- wp-admin/custom-background.php	(revision 21626)
+++ wp-admin/custom-background.php	(working copy)
@@ -108,7 +108,7 @@
 		add_thickbox();
 		wp_enqueue_script('media-upload');
 		wp_enqueue_script('custom-background');
-		wp_enqueue_style('farbtastic');
+		wp_enqueue_style('wp-color-picker');
 	}
 
 	/**
@@ -327,11 +327,8 @@
 <tr valign="top">
 <th scope="row"><?php _e( 'Background Color' ); ?></th>
 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
-<?php $show_clear = get_theme_mod('background_color') ? '' : ' style="display:none"'; ?>
-<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
-<a class="hide-if-no-js" href="#" id="pickcolor"><?php _e('Select a Color'); ?></a> <span<?php echo $show_clear; ?> class="hide-if-no-js" id="clearcolor"> (<a href="#"><?php current_theme_supports( 'custom-background', 'default-color' ) ? _e( 'Default' ) : _e( 'Clear' ); ?></a>)</span>
-<input type="hidden" id="defaultcolor" value="<?php if ( current_theme_supports( 'custom-background', 'default-color' ) ) echo '#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ); ?>" />
-<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
+<?php $default_color = current_theme_supports( 'custom-background', 'default-color' ) ? 'data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '" ' : ''; ?>
+<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" <?php echo $default_color ?>/>
 </fieldset></td>
 </tr>
 </tbody>