diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index 62eab38..e3cfa4a 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -184,8 +184,8 @@
         var input = e.target;
         // Remove old bindings.
         if (focused) {
-          $(focused).off('keyup', farb.updateValue)
-            .off('keyup', preview).off('keyup', resetScheme)
+          $(focused).off('keyup change', farb.updateValue)
+            .off('keyup change', preview).off('keyup change', resetScheme)
             .parent().removeClass('item-selected');
         }
 
@@ -193,12 +193,14 @@
         focused = input;
         farb.linkTo(function (color) { callback(input, color, true, false); });
         farb.setColor(input.value);
-        $(focused).on('keyup', farb.updateValue).on('keyup', preview).on('keyup', resetScheme)
+        $(focused)
+          .on('keyup', farb.updateValue).on('keyup', preview).on('keyup', resetScheme)
+          .change(farb.updateValue).change(preview).change(resetScheme)
           .parent().addClass('item-selected');
       }
 
       // Initialize color fields.
-      form.find('#palette input.form-text')
+      form.find('#palette input.form-color')
         .each(function () {
           // Extract palette field name
           this.key = this.id.substring(13);
diff --git a/core/modules/color/color.module b/core/modules/color/color.module
index 7809f5f..7925fa7 100644
--- a/core/modules/color/color.module
+++ b/core/modules/color/color.module
@@ -231,7 +231,7 @@ function color_scheme_form($complete_form, &$form_state, $theme) {
   foreach ($palette as $name => $value) {
     if (isset($names[$name])) {
       $form['palette'][$name] = array(
-        '#type' => 'textfield',
+        '#type' => 'color',
         '#title' => String::checkPlain($names[$name]),
         '#value_callback' => 'color_palette_color_value',
         '#default_value' => $value,
diff --git a/core/modules/color/css/color.admin.css b/core/modules/color/css/color.admin.css
index 5da8c35..fb8a8e6 100644
--- a/core/modules/color/css/color.admin.css
+++ b/core/modules/color/css/color.admin.css
@@ -18,13 +18,13 @@
 [dir="rtl"] .color-form label {
   clear: right;
 }
-.color-form .form-text {
+.color-form .form-color {
   float: left; /* LTR */
   width: 86%;
   text-align: center;
   cursor: pointer;
 }
-[dir="rtl"] .color-form .form-text {
+[dir="rtl"] .color-form .form-color {
   float: right;
 }
 #palette .hook {
@@ -94,12 +94,12 @@
     float: right;
     clear: right;
   }
-  .color-form .form-text,
+  .color-form .form-color,
   .color-form .form-select {
     float: left; /* LTR */
     width: auto;
   }
-  [dir="rtl"] .color-form .form-text,
+  [dir="rtl"] .color-form .form-color,
   [dir="rtl"] .color-form .form-select {
     float: right;
   }