diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index 233d0b0e44..5a15066e1a 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -139,7 +139,7 @@
         var input = e.target;
 
         if (focused) {
-          $(focused).off('keyup', farb.updateValue).off('keyup', preview).off('keyup', resetScheme).parent().removeClass('item-selected');
+          $(focused).off('keyup change', farb.updateValue).off('keyup change', preview).off('keyup change', resetScheme).parent().removeClass('item-selected');
         }
 
         focused = input;
@@ -147,10 +147,10 @@
           callback(input, color, true, false);
         });
         farb.setColor(input.value);
-        $(focused).on('keyup', farb.updateValue).on('keyup', preview).on('keyup', resetScheme).parent().addClass('item-selected');
+        $(focused).on('keyup change', farb.updateValue).on('keyup change', preview).on('keyup change', resetScheme).parent().addClass('item-selected');
       }
 
-      form.find('.js-color-palette input.form-text').each(function () {
+      form.find('.js-color-palette input.form-color').each(function () {
         this.key = this.id.substring(13);
         farb.linkTo(function () {}).setColor('#000').linkTo(this);
         var i = inputs.length;
@@ -188,4 +188,4 @@
       preview();
     }
   };
-})(jQuery, Drupal);
\ No newline at end of file
+})(jQuery, Drupal);
diff --git a/core/modules/color/color.module b/core/modules/color/color.module
index 712d65e784..41c18db681 100644
--- a/core/modules/color/color.module
+++ b/core/modules/color/color.module
@@ -247,7 +247,7 @@ function color_scheme_form($complete_form, FormStateInterface $form_state, $them
   foreach ($palette as $name => $value) {
     if (isset($names[$name])) {
       $form['palette'][$name] = [
-        '#type' => 'textfield',
+        '#type' => 'color',
         '#title' => $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 cddc4c7983..d6c3a894e7 100644
--- a/core/modules/color/css/color.admin.css
+++ b/core/modules/color/css/color.admin.css
@@ -19,13 +19,13 @@
 [dir="rtl"] .color-form label {
   clear: right;
 }
-.color-form .form-text {
+.color-form .form-color {
   float: left; /* LTR */
   width: 86%;
   cursor: pointer;
   text-align: center;
 }
-[dir="rtl"] .color-form .form-text {
+[dir="rtl"] .color-form .form-color {
   float: right;
 }
 .color-palette__hook {
@@ -110,12 +110,12 @@ button.is-unlocked,
     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;
   }