diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js
index eb64439e0b..6780ad8e58 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js
@@ -11,6 +11,11 @@ function hexBgColor() {
         restrict: "A",
         link: function (scope, element, attr, formCtrl) {
 
+            function setBackgroundColor(color) {
+                // note: can't use element.css(), it doesn't support hexa background colors
+                angular.element(element)[0].style.backgroundColor = "#" + color;
+            }
+
             // Only add inline hex background color if defined and not "true".
             if (attr.hexBgInline === undefined || (attr.hexBgInline !== undefined && attr.hexBgInline === "true")) {
 
@@ -26,18 +31,21 @@ function hexBgColor() {
                             // Get the orig color before changing it.
                             origColor = element.css("border-color");
                         }
-                        // Validate it - test with and without the leading hash.
-                        if (/^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(newVal)) {
-                            element.css("background-color", "#" + newVal);
+                        // Is it a regular hex value - (#)AABBCC ?
+                        var match = newVal.match(/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i);
+                        if (match && match.length) {
+                            setBackgroundColor(match[1]);
                             return;
                         }
-                        if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(newVal)) {
-                            element.css("background-color", newVal);
+                        // Is it a hexa value - (#)AABBCCDD ?
+                        match = newVal.match(/^#?([0-9a-f]{4}|[0-9a-f]{8})$/i);
+                        if (match && match.length) {
+                            setBackgroundColor(match[1]);
                             return;
                         }
                     }
 
-                    element.css("background-color", origColor);
+                    setBackgroundColor(origColor);
                 });
             }
         }