diff --git a/core/modules/color/color.module b/core/modules/color/color.module
index 2203133..58c9d17 100644
--- a/core/modules/color/color.module
+++ b/core/modules/color/color.module
@@ -29,6 +29,7 @@ function color_theme() {
   return array(
     'color_scheme_form' => array(
       'render element' => 'form',
+      'template' => 'color-scheme-form',
     ),
   );
 }
@@ -233,15 +234,15 @@ function color_scheme_form($complete_form, &$form_state, $theme) {
 }
 
 /**
- * Returns HTML for a theme's color form.
+ * Prepares variables for color scheme form templates.
  *
- * @param $variables
+ * Default template: color-scheme-form.html.twig.
+ *
+ * @param array $variables
  *   An associative array containing:
  *   - form: A render element representing the form.
- *
- * @ingroup themeable
  */
-function theme_color_scheme_form($variables) {
+function template_preprocess_color_scheme_form(&$variables) {
   $form = $variables['form'];
 
   $theme = $form['theme']['#value'];
@@ -254,26 +255,9 @@ function theme_color_scheme_form($variables) {
   // Add the JS at a weight below color.js.
   drupal_add_js($preview_js_path, array('weight' => -1));
 
-  $output  = '';
-  $output .= '<div class="color-form clearfix">';
-  // Color schemes
-  $output .= drupal_render($form['scheme']);
-  // Palette
-  $output .= '<div id="palette" class="clearfix">';
-  foreach (element_children($form['palette']) as $name) {
-    $output .= drupal_render($form['palette'][$name]);
-  }
-  $output .= '</div>';
-  // Preview
-  $output .= drupal_render_children($form);
-  $output .= '<h2>' . t('Preview') . '</h2>';
   // Attempt to load preview HTML if the theme provides it.
   $preview_html_path = DRUPAL_ROOT . '/' . (isset($info['preview_html']) ? drupal_get_path('theme', $theme) . '/' . $info['preview_html'] : drupal_get_path('module', 'color') . '/preview.html');
-  $output .= file_get_contents($preview_html_path);
-  // Close the wrapper div.
-  $output .= '</div>';
-
-  return $output;
+  $variables['html_preview'] = file_get_contents($preview_html_path);
 }
 
 /**
diff --git a/core/modules/color/templates/color-scheme-form.html.twig b/core/modules/color/templates/color-scheme-form.html.twig
new file mode 100644
index 0000000..1cd1547
--- /dev/null
+++ b/core/modules/color/templates/color-scheme-form.html.twig
@@ -0,0 +1,27 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a theme's color form.
+ *
+ * Available variables:
+ * - form: Form elements for the color scheme form, including:
+ *   - scheme: A color scheme form element. For example: a select element with
+ *     color theme presets, or a color picker widget.
+ *   - palette: Color fields that can be changed by entering in a new hex value.
+ * - html_preview: A HTML preview of the theme's current color scheme.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_color_scheme_form()
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="color-form clearfix">
+  {{ form.scheme }}
+  <div id="palette" class="clearfix">
+    {{ form.palette }}
+  </div>
+  {{ form }}
+  <h2>{{ 'Preview'|t }}</h2>
+  {{ html_preview }}
+</div>