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..d51633d9c8 100644
--- a/core/modules/color/color.module
+++ b/core/modules/color/color.module
@@ -63,7 +63,6 @@ function color_form_system_theme_settings_alter(&$form, FormStateInterface $form
       '#theme' => 'color_scheme_form',
     ];
     $form['color'] += color_scheme_form($form, $form_state, $theme);
-    $form['#validate'][] = 'color_scheme_form_validate';
     // Ensure color submission happens first so we can unset extra values.
     array_unshift($form['#submit'], 'color_scheme_form_submit');
   }
@@ -180,7 +179,6 @@ function color_get_palette($theme, $default = FALSE) {
  * @param $theme
  *   The machine name of the theme whose color settings are being configured.
  *
- * @see color_scheme_form_validate()
  * @see color_scheme_form_submit()
  */
 function color_scheme_form($complete_form, FormStateInterface $form_state, $theme) {
@@ -247,7 +245,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,
@@ -337,24 +335,8 @@ function color_valid_hexadecimal_string($color) {
   return (bool) preg_match('/^#([a-f0-9]{3}){1,2}$/iD', $color);
 }
 
-/**
- * Form validation handler for color_scheme_form().
- *
- * @see color_scheme_form_submit()
- */
-function color_scheme_form_validate($form, FormStateInterface $form_state) {
-  // Only accept hexadecimal CSS color strings to avoid XSS upon use.
-  foreach ($form_state->getValue('palette') as $key => $color) {
-    if (!color_valid_hexadecimal_string($color)) {
-      $form_state->setErrorByName('palette][' . $key, t('You must enter a valid hexadecimal color value for %name.', ['%name' => $form['color']['palette'][$key]['#title']]));
-    }
-  }
-}
-
 /**
  * Form submission handler for color_scheme_form().
- *
- * @see color_scheme_form_validate()
  */
 function color_scheme_form_submit($form, FormStateInterface $form_state) {
 
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;
   }
diff --git a/core/modules/color/tests/src/Functional/ColorTest.php b/core/modules/color/tests/src/Functional/ColorTest.php
index 57f8ba73a8..81542c8524 100644
--- a/core/modules/color/tests/src/Functional/ColorTest.php
+++ b/core/modules/color/tests/src/Functional/ColorTest.php
@@ -81,7 +81,7 @@ protected function setUp(): void {
       '#00' => FALSE,
       '#0000' => FALSE,
       '#00000' => FALSE,
-      '123456' => FALSE,
+      '123456' => TRUE,
       '#00000g' => FALSE,
     ];
   }
@@ -174,7 +174,7 @@ public function testValidColor() {
         $this->assertText('The configuration options have been saved.');
       }
       else {
-        $this->assertText('You must enter a valid hexadecimal color value for Main background.');
+        $this->assertText('Main background must be a valid color.');
       }
     }
   }