diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.controller.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.controller.js
index f3cd3d5bd3..403a05a5e1 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/canvasdesigner.controller.js
@@ -3,7 +3,7 @@
 /* Canvasdesigner panel app and controller */
 /*********************************************************************************************************/
 
-var app = angular.module("Umbraco.canvasdesigner", ['spectrumcolorpicker', 'ui.slider', 'umbraco.resources', 'umbraco.services'])
+var app = angular.module("Umbraco.canvasdesigner", ['colorpicker', 'ui.slider', 'umbraco.resources', 'umbraco.services'])
 
 .controller("Umbraco.canvasdesignerController", function ($scope, $http, $window, $timeout, $location, dialogService) {
 
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html
index 9346415999..84add72919 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.html
@@ -2,8 +2,8 @@
 <div ng-controller="Umbraco.canvasdesigner.background">
 
     <div class="box-slider">
-        <spectrum colorselected="item.values.color"></spectrum>
-    </div>    
+        <div colorpicker ng-model="item.values.color"></div>
+    </div>
 
     <div class="box-slider">
         <div class="imagePickerPreview" ng-click="open(item.values)" style="background-image:{{ item.values.imageorpattern }}">
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.js
index 5735ae9952..647a1b85ea 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.js
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/background.js
@@ -10,7 +10,7 @@ angular.module("Umbraco.canvasdesigner")
     if (!$scope.item.values) {
         $scope.item.values = {
             imageorpattern: '',
-            color:''
+            color: ''
         };
     }
 
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.html
index 582a9bcce2..651cd67446 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.html
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.html
@@ -4,12 +4,11 @@
     <div class="box-slider">
         <ul class="box-preview">
             <li ng-repeat="border in borderList" class="border-{{border}}" ng-class="{selected: selectedBorder.name == border}" ng-click="setselectedBorder(border)"></li>
-
         </ul>
     </div>
 
-    <div class="box-slider">
-        <spectrum colorselected="selectedBorder.color"></spectrum>
+    <div class="box-slider" ng-repeat="border in borderList" ng-show="selectedBorder.name == border">
+        <div colorpicker ng-model="item.values[(border !== 'all' ? border : '') + 'bordercolor']"></div>
         <select class="borderStyleSelect" ng-model="selectedBorder.type" ng-options="bordertype for bordertype in bordertypes"></select>
         <!--<i ng-if="selectedBorder.color != ''" ng-click="selectedBorder.color= ''" class="icon icon-delete colorPickerDelete"></i>-->
     </div>
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.js
index daca4373fc..bf64ad3fa0 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.js
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/border.js
@@ -92,35 +92,30 @@ angular.module("Umbraco.canvasdesigner")
         $scope.setselectedBorder($scope.borderList[0]);
     }, false);
 
-    $scope.$watch( "selectedBorder", function () {
+    $scope.$watch("selectedBorder", function () {
 
         if ($scope.selectedBorder.name == "all") {
             $scope.item.values.bordersize = $scope.selectedBorder.size;
-            $scope.item.values.bordercolor = $scope.selectedBorder.color;
-            $scope.item.values.bordertype =$scope.selectedBorder.type;
+            $scope.item.values.bordertype = $scope.selectedBorder.type;
         }
 
         if ($scope.selectedBorder.name == "left") {
             $scope.item.values.leftbordersize = $scope.selectedBorder.size;
-            $scope.item.values.leftbordercolor = $scope.selectedBorder.color;
             $scope.item.values.leftbordertype = $scope.selectedBorder.type;
         }
 
         if ($scope.selectedBorder.name == "right") {
             $scope.item.values.rightbordersize = $scope.selectedBorder.size;
-            $scope.item.values.rightbordercolor = $scope.selectedBorder.color;
             $scope.item.values.rightbordertype = $scope.selectedBorder.type;
         }
 
         if ($scope.selectedBorder.name == "top") {
             $scope.item.values.topbordersize = $scope.selectedBorder.size;
-            $scope.item.values.topbordercolor = $scope.selectedBorder.color;
             $scope.item.values.topbordertype = $scope.selectedBorder.type;
         }
 
         if ($scope.selectedBorder.name == "bottom") {
             $scope.item.values.bottombordersize = $scope.selectedBorder.size;
-            $scope.item.values.bottombordercolor = $scope.selectedBorder.color;
             $scope.item.values.bottombordertype = $scope.selectedBorder.type;
         }
 
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html
index 4ad4ba1345..94a412f128 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.html
@@ -1,8 +1,3 @@
-
-<div ng-controller="Umbraco.canvasdesigner.color">
-
-    <div class="box-slider">
-        <spectrum colorselected="item.values.color"></spectrum>
-    </div>
-
+<div class="box-slider">
+    <div colorpicker ng-model="item.values.color"></div>
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.js
index ca39244e6f..61e6da43dd 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.js
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/color.js
@@ -9,7 +9,7 @@ angular.module("Umbraco.canvasdesigner")
 
     if (!$scope.item.values) {
         $scope.item.values = {
-            color: '',
+            color: ''
         };
     }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less b/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less
index c97442f72d..b28522db1c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less
+++ b/src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less
@@ -1027,7 +1027,7 @@ iframe {
     height: 24px;
 }
 
-.bordereditor .spectrumcolorpicker {
+.bordereditor .color-picker-preview {
     display: inline-block;
     width: 120px;
     float: left;