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 1cbedaf26e..aac11bfd22 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
@@ -36,10 +36,14 @@ Use this directive to generate color swatches to pick from.
             scope.setColor = function (color, $index, $event) {
                 scope.selectedColor = color;
                 if (scope.onSelect) {
-                    scope.onSelect(color, $index, $event);
+                    scope.onSelect(color.color, $index, $event);
                     $event.stopPropagation();
                 }
             };
+
+            scope.isSelectedColor = function (color) {
+                return scope.selectedColor && color.value === scope.selectedColor.value;
+            }
         }
 
         var directive = {
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 74c010307a..91d461668f 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,9 +1,9 @@
 <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': color.value === selectedColor }" ng-click="setColor(color.value, $index, $event)">
+    <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)">
         <div class="umb-color-box-inner">
             <div class="check_circle">
-                <i class="icon icon-check small" ng-show="selectedColor && color.value === selectedColor.value"></i>
+                <i class="icon icon-check small" ng-show="isSelectedColor(color)"></i>
             </div>
             <div class="umb-color-box__label" ng-if="useLabel">
                 <div class="umb-color-box__name truncate">{{ color.label || color.value }}</div>