diff --git a/lib/app/js/directives/variable.js b/lib/app/js/directives/variable.js
index 1b0c6518..820b7909 100644
--- a/lib/app/js/directives/variable.js
+++ b/lib/app/js/directives/variable.js
@@ -7,10 +7,28 @@ angular.module('sgApp')
       restrict: 'A',
       templateUrl: 'views/partials/variable.html',
       link: function(scope) {
-        scope.isColor = function(value) {
-          if (/^(#|rgb)/.test(value)) return true;
-          return false;
+        var colorRegex = /#[0-9a-f]{3,6}/i;
+        scope.color = {};
+        scope.hasColor = function(value) {
+          return colorRegex.test(value);
         }
+
+        // Parse first color from the string
+        scope.$watch(function() {
+          return scope.variable.value;
+        }, function(newVal, oldVal) {
+          var match = colorRegex.exec(newVal);
+          if (match) {
+            scope.color.value = match[0];
+          }
+        });
+
+        // Set changed color back to the string
+        scope.$watch(function() {
+          return scope.color.value;
+        }, function(newVal, oldVal) {
+          scope.variable.value = scope.variable.value.replace(colorRegex, newVal);
+        });
       }
     };
   });
diff --git a/lib/app/views/partials/variable.html b/lib/app/views/partials/variable.html
index 573243dd..2e4bf259 100644
--- a/lib/app/views/partials/variable.html
+++ b/lib/app/views/partials/variable.html
@@ -1,5 +1,5 @@
 <div>
   <label>{{ variable.name }}<i ng-if="variable.dirty" class="fa fa-asterisk"></i></label>
-  <input class="sg" type="color" ng-if="isColor(variable.value)" ng-model="variable.value">
+  <input class="sg" type="color" ng-if="hasColor(variable.value)" ng-model="color.value">
   <input class="sg" type="text" ng-model="variable.value">
 </div>
\ No newline at end of file
diff --git a/test/angular/directives/variable.js b/test/angular/directives/variable.js
new file mode 100644
index 00000000..ba5f7d6f
--- /dev/null
+++ b/test/angular/directives/variable.js
@@ -0,0 +1,54 @@
+describe('Variable directive', function() {
+  var $scope, scope, elem, directive, linkFn, html;
+
+  beforeEach(module('sgApp'));
+
+  beforeEach(function() {
+    module(function($provide) {
+      $provide.value('Styleguide', {});
+      $provide.value('Variables', {
+        init: function() {}
+      });
+    });
+  });
+
+  beforeEach(function() {
+    html = '<div sg-variable></div>';
+
+    inject(function($compile, $rootScope, $templateCache) {
+      $templateCache.put('views/partials/variable.html', '<div></div>');
+      $scope = $rootScope.$new();
+      $scope.variable = {
+        value: '#000000'
+      };
+      elem = angular.element(html);
+      $compile(elem)($scope);
+      $scope.$apply();
+    });
+
+  });
+
+  it('should have correct default value', function() {
+    expect($scope.color.value).to.eql('#000000');
+  });
+
+  it('should parse color value correctly from the string', function() {
+    $scope.variable.value = 'test #ff0000 !default';
+    $scope.$apply();
+    expect($scope.color.value).to.eql('#ff0000');
+  });
+
+  it('should parse only the first color if string has multiple colors', function() {
+    $scope.variable.value = 'test #ff0000 #cccccc !default';
+    $scope.$apply();
+    expect($scope.color.value).to.eql('#ff0000');
+  });
+
+  it('replace color in the original string correctly', function() {
+    $scope.variable.value = 'test #ff0000 !default';
+    $scope.$apply();
+    $scope.color.value = '#cccccc';
+    $scope.$apply();
+    expect($scope.variable.value).to.eql('test #cccccc !default');
+  });
+});