diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
index d6eda76940..aa0d0b8714 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
@@ -27,7 +27,7 @@ Use this directive to generate color swatches to pick from.
 
     function ColorSwatchesDirective() {
 
-        function link(scope, el, attr, ctrl) {
+        function link(scope, el, attrs, ctrl) {
 
             // Set default to true if not defined
             if (Utilities.isUndefined(scope.useColorClass)) {
@@ -40,6 +40,12 @@ Use this directive to generate color swatches to pick from.
             }
 
             scope.setColor = function (color, $index, $event) {
+                if (scope.readonly) {
+                    $event.preventDefault();
+                    $event.stopPropagation();
+                    return;
+                }
+
                 if (scope.onSelect) {
                     // did the value change?
                     if (scope.selectedColor != null && scope.selectedColor.value === color.value) {
@@ -59,6 +65,10 @@ Use this directive to generate color swatches to pick from.
             scope.isSelectedColor = function (color) {
                 return scope.selectedColor && color.value === scope.selectedColor.value;
             }
+
+            attrs.$observe('readonly', (value) => {
+                scope.readonly = value !== undefined;
+            });
         }
 
         var directive = {
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 c3af6d4342..cd3bf3c4dc 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
@@ -98,3 +98,9 @@
         }
     }
 }
+
+.umb-color-swatches[readonly] {
+    .umb-color-box {
+        cursor: not-allowed;
+    }
+}
\ No newline at end of file
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 a4573c349c..da1763ef5e 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
@@ -1,6 +1,15 @@
 <div class="umb-color-swatches" ng-class="{ 'with-labels': useLabel }">
 
-    <button type="button" class="umb-color-box umb-color-box--{{size}} {{colorClassNamePrefix}}-{{color.value}}" ng-repeat="color in colors" title="{{useLabel || useColorClass ? (color.label || color.value) : ('#' + color.value)}}" hex-bg-inline="{{useColorClass === false}}" hex-bg-color="{{color.value}}" ng-class="{ 'active': isSelectedColor(color) }" ng-click="setColor(color, $index, $event)">
+    <button
+        type="button"
+        class="umb-color-box umb-color-box--{{size}} {{colorClassNamePrefix}}-{{color.value}}"
+        ng-repeat="color in colors"
+        title="{{useLabel || useColorClass ? (color.label || color.value) : ('#' + color.value)}}"
+        hex-bg-inline="{{useColorClass === false}}"
+        hex-bg-color="{{color.value}}"
+        ng-class="{ 'active': isSelectedColor(color) }"
+        ng-click="setColor(color, $index, $event)">
+
         <div class="umb-color-box-inner">
             <div class="check_circle">
                 <umb-icon icon="icon-check" class="icon small" ng-show="isSelectedColor(color)"></umb-icon>