diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html
index cb5c80a6f1..b4c01a4920 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html
@@ -5,14 +5,15 @@
             <localize key="colorpicker_noColors">You haven't defined any colors</localize>
         </div>
 
-        <umb-color-swatches colors="model.config.items"
-                            selected-color="model.value"
-                            size="m"
-                            use-label="model.useLabel"
-                            on-select="vm.selectColor(color)">
+        <umb-color-swatches 
+            colors="model.config.items"
+            selected-color="model.value"
+            size="m"
+            use-label="model.useLabel"
+            on-select="vm.selectColor(color)"
+            ng-attr-readonly="{{ readonly || undefined }}">
         </umb-color-swatches>
 
-
         <input type="hidden" name="selectedColor" ng-model="model.selectedColor" val-property-validator="validateMandatory" />
     </ng-form>