diff --git a/core/modules/color/color.install b/core/modules/color/color.install
index c3f9a74..c4d24d6 100644
--- a/core/modules/color/color.install
+++ b/core/modules/color/color.install
@@ -37,3 +37,24 @@ function color_requirements($phase) {
 
   return $requirements;
 }
+
+/**
+ * Converts variables to config.
+ */
+function color_update_8001() {
+  $themes = list_themes();
+  foreach ($themes as $theme_key => $theme) {
+    if (update_variable_get('color_' . $theme_key . '_palette')) {
+      $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 56c04cf..c7b3550 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,14 @@ 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.
+  $palatte_config = config('color.' . $theme)->get('palette');
+  return $palatte_config ? $palatte_config : $palette;
 }
 
 /**
@@ -161,7 +167,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 +297,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 +305,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,23 +341,16 @@ 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.
-  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');
-    return;
-  }
-
   // Prepare target locations for generated files.
   $id = $theme . '-' . substr(hash('sha256', serialize($palette) . microtime()), 0, 8);
   $paths['color'] = 'public://color';
@@ -362,8 +364,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 +420,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 +562,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 8902d4c..8c1f74f 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 283765d..5fc37eb 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Upgrade/SystemUpgradePathTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Upgrade/SystemUpgradePathTest.php
@@ -89,12 +89,56 @@ public function testVariableUpgrade() {
       'fallback_format' => 'plain_text'
     );
 
+    // color module for theme bartik
+    // screenshot is optional 
+    $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 ca85f43..b9972e9 100644
--- a/core/modules/system/tests/upgrade/drupal-7.system.database.php
+++ b/core/modules/system/tests/upgrade/drupal-7.system.database.php
@@ -98,7 +98,69 @@
 ->values(array(
   'name' => 'filter_allowed_protocols',
   'value' => 'a:4:{i:0;s:4:"http";i:1;s:5:"https";i:2;s:3:"ftp";i:3;s:6:"mailto";}',
+  ))
+->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();
 
 db_update('variable')