diff --git a/core/modules/color/color.install b/core/modules/color/color.install
index c3f9a74..5a2c3d1 100644
--- a/core/modules/color/color.install
+++ b/core/modules/color/color.install
@@ -37,3 +37,31 @@ function color_requirements($phase) {
 
   return $requirements;
 }
+
+/**
+ * Converts variables to config.
+ */
+function color_update_8001() {
+  $themes  = db_select('variable', 'v')
+    ->fields('v', array('name'))
+    ->condition('v.name', db_like('color_') . '%' . db_like('_palette'), 'LIKE')
+    ->execute()
+    ->fetchAllAssoc('name');
+
+  foreach ($themes as $theme_palette => $theme) {
+    // Get theme name from color palette variable.
+    preg_match('/color_(.*)_palette/', $theme_palette, $matches);
+    $theme_key = $matches[1];
+    $config = config('color.' . $theme_key);
+    $config->set('palette', update_variable_get('color_' . $theme_key . '_palette'));
+    $config->set('logo', update_variable_get('color_' . $theme_key . '_logo'));
+    $config->set('stylesheets', update_variable_get('color_' . $theme_key . '_stylesheets'));
+    $config->set('files', update_variable_get('color_' . $theme_key . '_files'));
+    // Screenshot is optional.
+    if (update_variable_get('color_' . $theme_key . '_screenshot')) {
+      $config->set('screenshot', update_variable_get('color_' . $theme_key . '_screenshot'));
+    }
+    $config->save();
+  }
+}
+
diff --git a/core/modules/color/color.module b/core/modules/color/color.module
index 87d0a37..f59af6c 100644
--- a/core/modules/color/color.module
+++ b/core/modules/color/color.module
@@ -65,7 +65,7 @@ function _color_html_alter(&$vars) {
   $themes = list_themes();
 
   // Override stylesheets.
-  $color_paths = variable_get('color_' . $theme_key . '_stylesheets', array());
+  $color_paths = config('color.' . $theme_key)->get('stylesheets');
   if (!empty($color_paths)) {
 
     foreach ($themes[$theme_key]->stylesheets['all'] as $base_filename => $old_path) {
@@ -99,7 +99,7 @@ function _color_page_alter(&$vars) {
   global $theme_key;
 
   // Override logo.
-  $logo = variable_get('color_' . $theme_key . '_logo');
+  $logo = config('color.' . $theme_key)->get('logo');
   if ($logo && $vars['logo'] && preg_match('!' . $theme_key . '/logo.png$!', $vars['logo'])) {
     $vars['logo'] = file_create_url($logo);
   }
@@ -132,8 +132,13 @@ function color_get_palette($theme, $default = FALSE) {
   $info = color_get_info($theme);
   $palette = $info['schemes']['default']['colors'];
 
+  if ($default) {
+    return $palette;
+  }
+
   // Load variable.
-  return $default ? $palette : variable_get('color_' . $theme . '_palette', $palette);
+  // @todo Default color config should be moved to yaml in the theme.
+  return config('color.' . $theme)->get('palette') ?: $palette;
 }
 
 /**
@@ -161,7 +166,7 @@ function color_scheme_form($complete_form, &$form_state, $theme) {
 
   // See if we're using a predefined scheme.
   // Note: we use the original theme when the default scheme is chosen.
-  $current_scheme = variable_get('color_' . $theme . '_palette', array());
+  $current_scheme = config('color.' . $theme)->get('palette');
   foreach ($schemes as $key => $scheme) {
     if ($current_scheme == $scheme) {
       $scheme_name = $key;
@@ -291,6 +296,7 @@ function color_scheme_form_validate($form, &$form_state) {
  * @see color_scheme_form_validate()
  */
 function color_scheme_form_submit($form, &$form_state) {
+
   // Get theme coloring info.
   if (!isset($form_state['values']['info'])) {
     return;
@@ -298,6 +304,8 @@ function color_scheme_form_submit($form, &$form_state) {
   $theme = $form_state['values']['theme'];
   $info = $form_state['values']['info'];
 
+  $config = config('color.' . $theme);
+
   // Resolve palette.
   $palette = $form_state['values']['palette'];
   if ($form_state['values']['scheme'] != '') {
@@ -332,20 +340,19 @@ function color_scheme_form_submit($form, &$form_state) {
   }
 
   // Delete old files.
-  foreach (variable_get('color_' . $theme . '_files', array()) as $file) {
-    @drupal_unlink($file);
+  $files = $config->get('files');
+  if (isset($files)) {
+    foreach ($files as $file) {
+      @drupal_unlink($file);
+    }
   }
   if (isset($file) && $file = dirname($file)) {
     @drupal_rmdir($file);
   }
 
-  // Don't render the default colorscheme, use the standard theme instead.
+  // No change in color config, use the standard theme from color.inc.
   if (implode(',', color_get_palette($theme, TRUE)) == implode(',', $palette)) {
-    variable_del('color_' . $theme . '_palette');
-    variable_del('color_' . $theme . '_stylesheets');
-    variable_del('color_' . $theme . '_logo');
-    variable_del('color_' . $theme . '_files');
-    variable_del('color_' . $theme . '_screenshot');
+    $config->delete();
     return;
   }
 
@@ -362,8 +369,10 @@ function color_scheme_form_submit($form, &$form_state) {
   $paths['files'] = $paths['map'] = array();
 
   // Save palette and logo location.
-  variable_set('color_' . $theme . '_palette', $palette);
-  variable_set('color_' . $theme . '_logo', $paths['target'] . 'logo.png');
+  $config
+    ->set('palette', $palette)
+    ->set('logo', $paths['target'] . 'logo.png')
+    ->save();
 
   // Copy over neutral images.
   foreach ($info['copy'] as $file) {
@@ -416,8 +425,10 @@ function color_scheme_form_submit($form, &$form_state) {
   }
 
   // Maintain list of files.
-  variable_set('color_' . $theme . '_stylesheets', $css);
-  variable_set('color_' . $theme . '_files', $paths['files']);
+  $config
+    ->set('stylesheets', $css)
+    ->set('files', $paths['files'])
+    ->save();
 }
 
 /**
@@ -556,7 +567,9 @@ function _color_render_images($theme, &$info, &$paths, $palette) {
     if ($file == 'screenshot.png') {
       $slice = imagecreatetruecolor(150, 90);
       imagecopyresampled($slice, $target, 0, 0, $x, $y, 150, 90, $width, $height);
-      variable_set('color_' . $theme . '_screenshot', $image);
+      config('color.'.$theme)
+        ->set('screenshot', $image)
+        ->save();
     }
     else {
       $slice = imagecreatetruecolor($width, $height);
diff --git a/core/modules/color/lib/Drupal/color/Tests/ColorTest.php b/core/modules/color/lib/Drupal/color/Tests/ColorTest.php
index d1f3b1e..6720e04 100644
--- a/core/modules/color/lib/Drupal/color/Tests/ColorTest.php
+++ b/core/modules/color/lib/Drupal/color/Tests/ColorTest.php
@@ -87,7 +87,7 @@ function _testColor($theme, $test_values) {
     $this->drupalPost($settings_path, $edit, t('Save configuration'));
 
     $this->drupalGet('<front>');
-    $stylesheets = variable_get('color_' . $theme . '_stylesheets', array());
+    $stylesheets = config('color.' . $theme)->get('stylesheets');
     $this->assertPattern('|' . file_create_url($stylesheets[0]) . '|', 'Make sure the color stylesheet is included in the content. (' . $theme . ')');
 
     $stylesheet_content = join("\n", file($stylesheets[0]));
@@ -99,7 +99,7 @@ function _testColor($theme, $test_values) {
     $this->drupalPost($settings_path, $edit, t('Save configuration'));
 
     $this->drupalGet('<front>');
-    $stylesheets = variable_get('color_' . $theme . '_stylesheets', array());
+    $stylesheets = config('color.' . $theme)->get('stylesheets');
     $stylesheet_content = join("\n", file($stylesheets[0]));
     $this->assertTrue(strpos($stylesheet_content, 'color: ' . $test_values['scheme_color']) !== FALSE, 'Make sure the color we changed is in the color stylesheet. (' . $theme . ')');
 
diff --git a/core/modules/system/lib/Drupal/system/Tests/Upgrade/SystemUpgradePathTest.php b/core/modules/system/lib/Drupal/system/Tests/Upgrade/SystemUpgradePathTest.php
index ea6d6aa..1987bb3 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Upgrade/SystemUpgradePathTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Upgrade/SystemUpgradePathTest.php
@@ -66,7 +66,7 @@ public function testVariableUpgrade() {
     $expected_config['system.site'] = array(
       'name' => 'Testing config upgrade',
       // The upgrade from site_mail to system.site:mail is not testable as
-      // simpletest overrides this configuration with simpletest@example.com.
+      // Simpletest overrides this configuration with simpletest@example.com.
       // 'mail' => 'config@example.com',
       'slogan' => 'CMI makes Drupal 8 drush cex -y',
       'page.403' => '403',
@@ -99,12 +99,55 @@ public function testVariableUpgrade() {
       'recursion_limit' => 42,
     );
 
+    // Color module for theme bartik, optional screenshot.
+    $expected_config['color.bartik'] = array(
+      'palette' => array(
+        'top' => '#8eccf2',
+        'bottom' => '#48a9e4',
+        'bg' => '#ffffff',
+        'sidebar' => '#f6f6f2',
+        'sidebarborders' => '#f9f9f9',
+        'footer' => '#db2a2a',
+        'titleslogan' => '#fffeff',
+        'text' => '#fb8484',
+        'link' => '#3587b7',
+      ),
+      'logo' => 'public://color/bartik-09696463/logo.png',
+      'stylesheets' => 'public://color/bartik-09696463/colors.css',
+      'files' => array(
+        'public://color/bartik-09696463/logo.png', 'public://color/bartik-09696463/colors.css'
+      ),
+    );
+    // Second try with faked seven upgrade, optional screenshot.
+    $expected_config['color.seven'] = array(
+      'palette' => array(
+        'top' => '#8eccf2',
+        'bottom' => '#48a9e4',
+        'bg' => '#ffffff',
+        'sidebar' => '#f6f6f2',
+        'sidebarborders' => '#f9f9f9',
+        'footer' => '#db2a2a',
+        'titleslogan' => '#fffeff',
+        'text' => '#fb8484',
+        'link' => '#3587b7',
+      ),
+      'logo' => 'public://color/seven-09696463/logo.png',
+      'stylesheets' => 'public://color/seven-09696463/colors.css',
+      'files' => array(
+        'public://color/seven-09696463/logo.png', 'public://color/seven-09696463/colors.css'
+      ),
+      'screenshot' => 'public://color/seven-09696463/dummy-screenshot.png',
+    );
+
     foreach ($expected_config as $file => $values) {
       $config = config($file);
       $this->verbose(print_r($config->get(), TRUE));
       foreach ($values as $name => $value) {
         $stored = $config->get($name);
-        $this->assertEqual($value, $stored, format_string('Expected value for %name found: %stored (previously: %value).', array('%stored' => $stored, '%name' => $name, '%value' => $value)));
+        // Make sure we have a string representation to show.
+        $stored_txt = !is_string($stored) ? json_encode($stored) : $stored;
+        $value_txt = !is_string($value) ? json_encode($value) : $value;
+        $this->assertEqual($value, $stored, format_string('Expected value for %name found: %stored (previously: %value).', array('%name' => $name, '%stored' => $stored_txt, '%value' => $value_txt)));
       }
     }
   }
diff --git a/core/modules/system/tests/upgrade/drupal-7.system.database.php b/core/modules/system/tests/upgrade/drupal-7.system.database.php
index 061540b..44fad9f 100644
--- a/core/modules/system/tests/upgrade/drupal-7.system.database.php
+++ b/core/modules/system/tests/upgrade/drupal-7.system.database.php
@@ -133,3 +133,65 @@
   ->fields(array('value' => 's:10:"plain_text";'))
   ->condition('name', 'filter_fallback_format')
   ->execute();
+
+// color module in bartik
+$palette = array(
+  'top' => '#8eccf2',
+  'bottom' => '#48a9e4',
+  'bg' => '#ffffff',
+  'sidebar' => '#f6f6f2',
+  'sidebarborders' => '#f9f9f9',
+  'footer' => '#db2a2a',
+  'titleslogan' => '#fffeff',
+  'text' => '#fb8484',
+  'link' => '#3587b7',
+);
+
+db_insert('variable')->fields(array(
+  'name',
+  'value',
+))
+  ->values(array(
+  'name' => 'color_bartik_files',
+  'value' => serialize(array('public://color/bartik-09696463/logo.png', 'public://color/bartik-09696463/colors.css')),
+))
+  ->values(array(
+  'name' => 'color_bartik_logo',
+  'value' => serialize('public://color/bartik-09696463/logo.png'),
+))
+  ->values(array(
+  'name' => 'color_bartik_palette',
+  'value' => serialize($palette),
+))
+  ->values(array(
+  'name' => 'color_bartik_stylesheets',
+  'value' => serialize('public://color/bartik-09696463/colors.css'),
+))
+  ->execute();
+
+// color module with faked seven upgrade path to test screenshot option
+db_insert('variable')->fields(array(
+  'name',
+  'value',
+))
+  ->values(array(
+  'name' => 'color_seven_files',
+  'value' => serialize(array('public://color/seven-09696463/logo.png', 'public://color/seven-09696463/colors.css')),
+))
+  ->values(array(
+  'name' => 'color_seven_logo',
+  'value' => serialize('public://color/seven-09696463/logo.png'),
+))
+  ->values(array(
+  'name' => 'color_seven_palette',
+  'value' => serialize($palette),
+))
+  ->values(array(
+  'name' => 'color_seven_stylesheets',
+  'value' => serialize('public://color/seven-09696463/colors.css'),
+))
+  ->values(array(
+  'name' => 'color_seven_screenshot',
+  'value' => serialize('public://color/seven-09696463/dummy-screenshot.png'),
+))
+  ->execute();