diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less
index 43e62780a3..26a735508e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less
@@ -42,8 +42,8 @@
     &.with-labels {
 
         .umb-color-box {
-            width: 120px;
-            height: 100%;
+            width: 130px;
+            height: auto;
             display: flex;
             flex-flow: row wrap;
 
@@ -53,15 +53,21 @@
                 flex: 0 0 100%;
                 max-width: 100%;
                 min-height: 80px;
-                padding-top: 10px;
+                padding: 0;
+
+                .check_circle {
+                    margin: 15px auto;
+                }
 
                 .umb-color-box__label {
                     background: @white;
                     font-size: 14px;
                     display: flex;
                     flex-flow: column wrap;
-                    flex: 0 0 100%;
+                    flex: 1 0 100%;
+                    justify-content: flex-end;
                     padding: 1px 5px;
+                    min-height: 45px;
                     max-width: 100%;
                     margin-top: auto;
                     margin-bottom: -3px;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html
index 2bc7ce9622..3e92f5c18c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html
@@ -6,7 +6,7 @@
                 <i class="icon icon-check small"></i>
             </div>
             <div class="umb-color-box__label" ng-if="useLabel">
-                <div class="umb-color-box__name truncate">{{ color.label }}</div>
+                <div class="umb-color-box__name truncate">{{ color.label || color.value }}</div>
                 <div class="umb-color-box__description">#{{ color.value }}</div>
             </div>
         </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/colorpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/colorpicker.controller.js
new file mode 100644
index 0000000000..c588893d7c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/colorpicker.controller.js
@@ -0,0 +1,64 @@
+angular.module("umbraco").controller("Umbraco.PrevalueEditors.ColorPickerController",
+    function ($scope) {
+
+        //setup the default config
+        var config = {
+            useLabel: false
+        };
+
+        //map the user config
+        angular.extend(config, $scope.model.config);
+
+        //map back to the model
+        $scope.model.config = config;
+
+        $scope.isConfigured = $scope.model.prevalues && _.keys($scope.model.prevalues).length > 0;
+
+        $scope.model.items = [];
+
+        // Make an array from the dictionary
+        var items = [];
+
+        if (angular.isArray($scope.model.prevalues)) {
+
+            for (var i in $scope.model.prevalues) {
+                var oldValue = $scope.model.prevalues[i];
+
+                if (!isValidHex(oldValue.value || oldValue))
+                    continue;
+
+                if (oldValue.hasOwnProperty("value")) {
+                    var hexCode = toFullHex(oldValue.value);
+                    items.push({
+                        value: hexCode.substr(1, hexCode.length),
+                        label: oldValue.label,
+                        id: i
+                    });
+                } else {
+                    var hexCode = toFullHex(oldValue);
+                    items.push({
+                        value: hexCode.substr(1, hexCode.length),
+                        label: oldValue,
+                        id: i
+                    });
+                }
+            }
+
+            // Now make the editor model the array
+            $scope.model.items = items;
+        }
+
+        function toFullHex(hex) {
+            if (hex.length === 4 && hex.charAt(0) === "#") {
+                hex = "#" + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2) + hex.charAt(3) + hex.charAt(3);
+            }
+            return hex.toLowerCase();
+        }
+
+        function isValidHex(str) {
+            console.log("str", str);
+            console.log("test", /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(str));
+            return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(str);
+        }
+
+    });
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/colorpicker.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/colorpicker.html
new file mode 100644
index 0000000000..b5f77269b8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/colorpicker.html
@@ -0,0 +1,18 @@
+<div ng-controller="Umbraco.PrevalueEditors.ColorPickerController">
+
+    <div ng-if="!isConfigured">
+        <localize key="colorpicker_noColors">You haven't defined any colors</localize>
+    </div>
+
+    <umb-color-swatches colors="model.items"
+                        selected-color="model.value"
+                        size="s"
+                        use-label="model.config.useLabel">
+    </umb-color-swatches>
+
+    {{model.items | json}}
+    <br /><br />
+    {{model.value}}
+
+    <input type="hidden" name="modelValue" ng-model="model.value" />
+</div>