diff --git a/core/modules/color/color.module b/core/modules/color/color.module
index 87d0a37..730b03c 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',
     ),
   );
 }
@@ -228,7 +229,7 @@ function color_scheme_form($complete_form, &$form_state, $theme) {
 }
 
 /**
- * Returns HTML for a theme's color form.
+ * Preprocess variables for a theme's color form.
  *
  * @param $variables
  *   An associative array containing:
@@ -236,39 +237,34 @@ function color_scheme_form($complete_form, &$form_state, $theme) {
  *
  * @ingroup themeable
  */
-function theme_color_scheme_form($variables) {
+function template_preprocess_color_scheme_form(&$variables) {
   $form = $variables['form'];
 
   $theme = $form['theme']['#value'];
   $info = $form['info']['#value'];
   $path = drupal_get_path('theme', $theme) . '/';
   drupal_add_css($path . $info['preview_css']);
-
+  
   // @todo Transform to add library.
   $preview_js_path = isset($info['preview_js']) ? $path . $info['preview_js'] : drupal_get_path('module', 'color') . '/' . 'preview.js';
   // 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']);
+  $variables['scheme'] = $form['scheme'];
+
   // Palette
-  $output .= '<div id="palette" class="clearfix">';
+  $rows = array();
   foreach (element_children($form['palette']) as $name) {
-    $output .= drupal_render($form['palette'][$name]);
+    $rows[] = $form['palette'][$name];
   }
-  $output .= '</div>';
+  $variables['rows'] = $rows;
+
   // Preview
-  $output .= drupal_render_children($form);
-  $output .= '<h2>' . t('Preview') . '</h2>';
+  $variables['children'] = drupal_render_children($form);
   // 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..f5fe134
--- /dev/null
+++ b/core/modules/color/templates/color-scheme-form.html.twig
@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a theme's color form.
+ *
+ * Available variables:
+ * - scheme: Adds elements to aid theming of the theme's color scheme.
+ *   eg. (select element with color theme presets, a color picker widget)
+ * - colors: An array of colors
+ * - children: Rendered children elements.
+ * - 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">
+  {{ scheme }}
+  <div id="palette" class="clearfix">
+    {% for row in rows %}
+      {{ row }}
+    {% endfor %}
+  </div>
+  {{ children }}
+  <h2>{{ 'Preview'|t }}</h2>
+  {{ html_preview }}
+</div>