diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index ce3f0c6dc30..78fb7d9341a 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -2218,6 +2218,17 @@ img.help_tip {
 			}
 		}
 
+		.colorpickpreview {
+			padding: 3px;
+			padding-left: 20px;
+			border: 1px solid #ddd;
+			border-right: 0;
+		}
+
+		.colorpick {
+			border-left: 0;
+		}
+
 		.image_width_settings {
 			vertical-align: middle;
 
diff --git a/assets/js/admin/settings.js b/assets/js/admin/settings.js
index a2b1d978fa4..129382752eb 100644
--- a/assets/js/admin/settings.js
+++ b/assets/js/admin/settings.js
@@ -13,12 +13,10 @@ jQuery( window ).load( function() {
 	// Color picker
 	jQuery( '.colorpick' ).iris({
 		change: function( event, ui ) {
-			jQuery( this ).css({ backgroundColor: ui.color.toString() });
+			jQuery( this ).parent().find( '.colorpickpreview' ).css({ backgroundColor: ui.color.toString() });
 		},
 		hide: true,
 		border: true
-	}).each( function() {
-		jQuery( this ).css({ backgroundColor: jQuery( this ).val() });
 	}).click( function() {
 		jQuery( '.iris-picker' ).hide();
 		jQuery( this ).closest( '.color_box, td' ).find( '.iris-picker' ).show();
diff --git a/includes/admin/class-wc-admin-settings.php b/includes/admin/class-wc-admin-settings.php
index 98c1fbe4ece..bf5c24c31bd 100644
--- a/includes/admin/class-wc-admin-settings.php
+++ b/includes/admin/class-wc-admin-settings.php
@@ -296,6 +296,11 @@ class WC_Admin_Settings {
 							<?php echo $tooltip_html; ?>
 						</th>
 						<td class="forminp forminp-<?php echo sanitize_title( $value['type'] ) ?>">
+							<?php
+							if ( 'color' == $value['type'] ) {
+								echo '<span class="colorpickpreview" style="background: ' . esc_attr( $option_value ) . ';"></span>';
+							}
+							?>
 							<input
 								name="<?php echo esc_attr( $value['id'] ); ?>"
 								id="<?php echo esc_attr( $value['id'] ); ?>"