diff --git a/src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js b/src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js
index b85f7c8fa3..a5b94cd1e1 100644
--- a/src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js
+++ b/src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js
@@ -217,10 +217,10 @@ function dependencies() {
         {
             "name": "spectrum",
             "src":  [
-                "./node_modules/spectrum-colorpicker/spectrum.js",
-                "./node_modules/spectrum-colorpicker/spectrum.css"
+                "./node_modules/spectrum-colorpicker2/dist/spectrum.js",
+                "./node_modules/spectrum-colorpicker2/dist/spectrum.css"
             ],
-            "base": "./node_modules/spectrum-colorpicker"
+            "base": "./node_modules/spectrum-colorpicker2/dist"
         },
         {
             "name": "tinymce",
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 0057a47383..fa94bf79f6 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -41,7 +41,7 @@
     "nouislider": "14.6.1",
     "npm": "^6.14.7",
     "signalr": "2.4.0",
-    "spectrum-colorpicker": "1.8.0",
+    "spectrum-colorpicker2": "2.0.3",
     "tinymce": "4.9.11",
     "typeahead.js": "0.11.1",
     "underscore": "1.9.1",
diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 664be1dafc..3912d11161 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -163,6 +163,16 @@
     .sp-replacer {
         display: inline-flex;
         margin-right: 18px;
+        height: auto;
+
+        .sp-preview {
+            margin: 5px;
+            height: auto;
+        }
+
+        .sp-dd {
+            line-height: 2rem;
+        }
     }
 
     label {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
index 2cbad88a43..79d21f8e25 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
@@ -32,12 +32,14 @@
         ], $scope).then(function () {
             var elem = $element.find("input[name='newColor']");
             elem.spectrum({
-                color: null,
+                type: "color",
+                color: defaultColor,
+                showAlpha: false,
                 showInitial: false,
+                showInput: true,
                 chooseText: $scope.labels.choose,
                 cancelText: $scope.labels.cancel,
                 preferredFormat: "hex",
-                showInput: true,
                 clickoutFiresChange: true,
                 hide: function (color) {
                     //show the add butotn