Index: /trunk/wp-includes/class-wp-customize-control.php
===================================================================
--- /trunk/wp-includes/class-wp-customize-control.php	(revision 20496)
+++ /trunk/wp-includes/class-wp-customize-control.php	(revision 20497)
@@ -216,14 +216,14 @@
 				<label>
 					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<div class="color-picker">
-						<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
-						<a href="#"></a>
-						<div class="color-picker-controls">
-							<div class="farbtastic-placeholder"></div>
-							<div class="color-picker-details">
-								<div class="color-picker-hex">
-									<span>#</span>
-									<input type="text" <?php $this->link(); ?> />
-								</div>
+					<a href="#" class="color-picker-toggle">
+						<div class="color-picker-spot"></div>
+						<div class="color-picker-dropdown"></div>
+					</a>
+					<div class="color-picker-controls">
+						<div class="farbtastic-placeholder"></div>
+						<div class="color-picker-details">
+							<div class="color-picker-hex">
+								<span>#</span>
+								<input type="text" <?php $this->link(); ?> />
 							</div>
 						</div>
Index: /trunk/wp-includes/css/customize-controls.dev.css
===================================================================
--- /trunk/wp-includes/css/customize-controls.dev.css	(revision 20496)
+++ /trunk/wp-includes/css/customize-controls.dev.css	(revision 20497)
@@ -198,10 +198,7 @@
  * Color Picker
  */
-.customize-section .color-picker a {
-	display: block;
-	height: 20px;
-	width: 40px;
-	border: solid 3px rgba( 0, 0, 0, 0.1 );
-	background-color: #fff;
+.customize-section .color-picker-toggle {
+	float: left;
+	display: block;
 
 	-webkit-border-radius: 3px;
@@ -209,9 +206,55 @@
 }
 
-.customize-section .color-picker .color-picker-controls {
+.customize-section .color-picker-spot,
+.customize-section .color-picker-dropdown {
+	float: left;
+	height: 24px;
+	line-height: 24px;
+}
+
+.customize-section .color-picker-spot {
+	min-width: 30px;
+	padding: 0 5px;
+	background-color: #fff;
+	border: 1px solid rgba( 0, 0, 0, 0.15 );
+	-webkit-border-radius: 3px 0 0 3px;
+	border-radius: 3px 0 0 3px;
+}
+
+.customize-section .color-picker-dropdown {
+	position: relative;
+	width: 15px;
+
+	border-color: #ccc;
+	border-style: solid;
+	border-width: 1px 1px 1px 0;
+	-webkit-border-radius: 0 3px 3px 0;
+	border-radius: 0 3px 3px 0;
+}
+
+.customize-section .color-picker-dropdown:after {
+	content: '';
+	width: 0;
+	height: 0;
+	border-color: #ccc transparent transparent transparent;
+	border-style: solid;
+	border-width: 4px;
+	position: absolute;
+	top: 11px;
+	right: 4px;
+	z-index: 1;
+}
+.customize-section .color-picker-toggle.open .color-picker-dropdown:after {
+	border-color: transparent transparent #ccc transparent;
+	top: 6px;
+}
+
+.customize-section .color-picker-controls {
 	display: none;
-}
-
-.customize-section .color-picker .farbtastic-placeholder {
+	float: left;
+	margin-top: 10px;
+}
+
+.customize-section .color-picker-controls .farbtastic-placeholder {
 	height: 195px;
 	width: 195px;
Index: /trunk/wp-includes/js/customize-controls.dev.js
===================================================================
--- /trunk/wp-includes/js/customize-controls.dev.js	(revision 20496)
+++ /trunk/wp-includes/js/customize-controls.dev.js	(revision 20497)
@@ -98,20 +98,22 @@
 		ready: function() {
 			var control = this,
-				picker, ui, text, toggle, update;
-
-			picker = this.container.find( '.color-picker' );
-			ui     = picker.find( '.color-picker-controls' );
-			toggle = picker.find( 'a' );
+				toggle, spot, ui, text, update;
+
+			toggle = this.container.find( '.color-picker-toggle' );
+			spot   = toggle.find('.color-picker-spot');
+			ui     = this.container.find( '.color-picker-controls' );
 			update = function( color ) {
 				color = '#' + color;
-				toggle.css( 'background', color );
+				spot.css( 'background', color );
 				control.farbtastic.setColor( color );
 			};
 
-			picker.on( 'click', 'a', function() {
+			toggle.on( 'click', function( event ) {
 				ui.toggle();
-			});
-
-			this.farbtastic = $.farbtastic( picker.find('.farbtastic-placeholder'), function( color ) {
+				toggle.toggleClass( 'open' );
+				event.preventDefault();
+			});
+
+			this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), function( color ) {
 				control.setting.set( color.replace( '#', '' ) );
 			});
