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 d998504d1b..9d7927f59a 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
@@ -18,6 +18,7 @@ Use this directive to generate color swatches to pick from.
 @param {string} size (<code>attribute</code>): The size (s, m).
 @param {string} useLabel (<code>attribute</code>): Specify if labels should be used.
 @param {string} useColorClass (<code>attribute</code>): Specify if color values are css classes.
+@param {string} colorClassNamePrefix (<code>attribute</code>): Specify the prefix used for the class for each color (defaults to "btn").
 @param {function} onSelect (<code>expression</code>): Callback function when the item is selected.
 **/
 
@@ -32,6 +33,11 @@ Use this directive to generate color swatches to pick from.
             if (angular.isUndefined(scope.useColorClass)) {
                 scope.useColorClass = false;
             }
+
+            // Set default to "btn" if not defined
+            if (angular.isUndefined(scope.colorClassNamePrefix)) {
+                scope.colorClassNamePrefix = "btn";
+            }
             
             scope.setColor = function (color, $index, $event) {
                 if (scope.onSelect) {
@@ -66,7 +72,8 @@ Use this directive to generate color swatches to pick from.
                 selectedColor: '=',
                 onSelect: '&',
                 useLabel: '=',
-                useColorClass: '=?'
+                useColorClass: '=?',
+                colorClassNamePrefix: '@?'
             },
             link: link
         };
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 91d461668f..7e6bf443b2 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,6 @@
 <div class="umb-color-swatches" ng-class="{ 'with-labels': useLabel }">
 
-    <button type="button" class="umb-color-box umb-color-box--{{size}} btn-{{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">
                 <i class="icon icon-check small" ng-show="isSelectedColor(color)"></i>