diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/colorpicker.directive.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/colorpicker.directive.js
new file mode 100644
index 0000000000..fed5886dff
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/colorpicker.directive.js
@@ -0,0 +1,69 @@
+
+/*********************************************************************************************************/
+/* spectrum color picker directive */
+/*********************************************************************************************************/
+
+angular.module('colorpicker', ['spectrumcolorpicker'])
+  .directive('colorpicker', ['dialogService', function (dialogService) {
+      return {
+          restrict: 'EA',
+          scope: {
+              ngModel: '='
+          },
+          link: function (scope, $element) {
+
+              scope.openColorDialog = function () {
+                  var config = {
+                      template: "colorModal.html",
+                      change: function (data) {
+                          scope.ngModel = data;
+                      },
+                      callback: function (data) {
+                          scope.ngModel = data;
+                      },
+                      cancel: function (data) {
+                          scope.ngModel = data;
+                      },
+                      dialogItem: scope.ngModel,
+                      scope: scope
+                  };
+
+                  dialogService.open(config);
+              }
+
+              scope.setColor = false;
+
+              scope.submitAndClose = function () {
+                  if (scope.ngModel != "") {
+                      scope.setColor = true;
+                      scope.submit(scope.ngModel);
+                  } else {
+                      scope.cancel();
+                  }
+
+              };
+
+              scope.cancelAndClose = function () {
+                  scope.cancel();
+              }
+
+          },
+          template:
+            '<div>' + 
+                '<div class="color-picker-preview" ng-click="openColorDialog()" style="background: {{ngModel}} !important;"></div>' +
+                '<script type="text/ng-template" id="colorModal.html">' + 
+                    '<div class="modal-header">' + 
+                        '<h1>Header</h1>' + 
+                    '</div>' + 
+                    '<div class="modal-body">' + 
+                        '<spectrum colorselected="ngModel" set-color="setColor" flat="true" show-palette="true"></spectrum>' +
+                    '</div>' + 
+                    '<div class="right">' + 
+                        '<a class="btn" href="#" ng-click="cancelAndClose()">Cancel</a>' + 
+                        '<a class="btn btn-success" href="#" ng-click="submitAndClose()">Done</a>' + 
+                    '</div>' + 
+                '</script>' + 
+            '</div>',
+          replace: true
+      };
+  }])
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/dialog.service.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/dialog.service.js
index d4abc2741d..c362dd50dc 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/dialog.service.js
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/dialog.service.js
@@ -5,12 +5,14 @@
 
 angular.module("Umbraco.canvasdesigner").factory('dialogService', function ($rootScope, $q, $http, $timeout, $compile, $templateCache) {
 
-
-    function closeDialog(dialog) {
+    function closeDialog(dialog, destroyScope) {
         if (dialog.element) {
             dialog.element.removeClass("selected");
             dialog.element.html("");
-            dialog.scope.$destroy();
+
+            if (destroyScope) {
+                dialog.scope.$destroy();
+            }
         }
     }
 
@@ -32,7 +34,11 @@ angular.module("Umbraco.canvasdesigner").factory('dialogService', function ($roo
             };
 
             var dialog = angular.extend(defaults, options);
+            var destroyScope = true;
 
+            if (options && options.scope) {
+                destroyScope = false;
+            }
             var scope = (options && options.scope) || $rootScope.$new();
 
             // Save original value for cancel action
@@ -42,10 +48,11 @@ angular.module("Umbraco.canvasdesigner").factory('dialogService', function ($roo
 
 
             /************************************/
+            // Close dialog if the user clicks outside the dialog. (Not working well with colorpickers and datepickers)
             $(document).mousedown(function (e) {
                 var container = dialog.element;
                 if (!container.is(e.target) && container.has(e.target).length === 0) {
-                    closeDialog(dialog);
+                    closeDialog(dialog, destroyScope);
                 }
             });
             /************************************/
@@ -66,7 +73,7 @@ angular.module("Umbraco.canvasdesigner").factory('dialogService', function ($roo
                     if (dialog.cancel) {
                         dialog.cancel(originalDialogItem);
                     }
-                    closeDialog(dialog);
+                    closeDialog(dialog, destroyScope);
                 }
 
                 scope.change = function (data) {
@@ -79,11 +86,11 @@ angular.module("Umbraco.canvasdesigner").factory('dialogService', function ($roo
                     if (dialog.callback) {
                         dialog.callback(data);
                     }
-                    closeDialog(dialog);
+                    closeDialog(dialog, destroyScope);
                 };
 
                 scope.close = function () {
-                    closeDialog(dialog);
+                    closeDialog(dialog, destroyScope);
                 }
 
                 scope.dialogData = dialog.dialogData;
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/spectrum.directive.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/spectrum.directive.js
index a8e9ce21ea..214190a9b9 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/spectrum.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/spectrum.directive.js
@@ -9,7 +9,10 @@ angular.module('spectrumcolorpicker', [])
           restrict: 'E',
           transclude: true,
           scope: {
-              colorselected: '='
+              colorselected: '=',
+              setColor: '=',
+              flat: '=',
+              showPalette: '='
           },
           link: function (scope, $element) {
 
@@ -18,9 +21,13 @@ angular.module('spectrumcolorpicker', [])
               $element.find("input").spectrum({
                   color: scope.colorselected,
                   allowEmpty: true,
-                  preferredFormat: "rgb",
+                  preferredFormat: "hex",
                   showAlpha: true,
                   showInput: true,
+                  flat: scope.flat,
+                  localStorageKey: "spectrum.panel",
+                  showPalette: scope.showPalette,
+                  palette: [],
                   change: function (color) {
 
                       if (color) {
@@ -45,8 +52,10 @@ angular.module('spectrumcolorpicker', [])
 
               });
 
-              scope.$watch('colorselected', function () {
-                  $element.find("input").spectrum("set", scope.colorselected);
+              scope.$watch('setcolor', function (setColor) {
+                  if (scope.$eval(setColor) === true) {
+                      $element.find("input").spectrum("set", scope.colorselected);
+                  }
               }, true);
 
           },
diff --git a/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less b/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less
index 9aa69092a6..c97442f72d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less
+++ b/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less
@@ -700,6 +700,46 @@ h4.panel-title {
     display: block;
 }
 
+.canvasdesigner .color-picker-preview {
+    height: 26px;
+    border: 1px solid #CDCDCD;
+    border-radius: 1px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+    cursor: pointer;
+}
+
+.canvasdesigner .spectrumcolorpicker {
+
+}
+
+.canvasdesigner .float-panel .sp-container.sp-flat {
+    background-color: transparent;
+    border: none;
+    padding: 10px;
+    width: 100%;
+}
+
+.canvasdesigner .float-panel .sp-container.sp-flat .sp-picker-container {
+    padding: 0;
+    margin: 0px;
+    margin-bottom: 10px;
+    border: none;
+    width: 100%;
+}
+
+.canvasdesigner .float-panel .sp-container.sp-flat .sp-palette-container {
+    padding: 0;
+    height: 32px;
+    width: 100%;
+    float: left;
+    margin: 0;
+    border: none;
+}
+
+.canvasdesigner .float-panel .sp-container.sp-flat .sp-button-container {
+    display: none;
+}
+
 .colorPickerDelete {
     position: absolute;
     margin: -23px 0 0 0;