diff --git a/source/Ox.UI/js/Core/Theme.js b/source/Ox.UI/js/Core/Theme.js
index e037f9e2..bb6d2b34 100644
--- a/source/Ox.UI/js/Core/Theme.js
+++ b/source/Ox.UI/js/Core/Theme.js
@@ -28,7 +28,7 @@ Ox.Theme = (function() {
     }
 
     function renderElement(value, type) {
-        var $element, background, color, data = that.getThemeData();
+        var $element, background, color, data = that.getThemeData(), saturation;
         if (type == 'hue') {
             background = Ox.rgb(value, 1, data.themeBackgroundLightness);
             color = Ox.rgb(value, 1, data.themeColorLightness);
@@ -45,12 +45,13 @@ Ox.Theme = (function() {
                 return Math.round(value * 255) + (value < 0.5 ? 128 : -128);
             });
         } else if (type == 'gradient') {
+            saturation = value === null ? 0 : 1;
             background = Ox.range(2).map(function(i) {
-                return Ox.rgb(value, 1, data.themeBackgroundLightness).map(function(value) {
-                    return value + (i == 0 ? 16 : -16);
+                return Ox.rgb(value || 0, saturation, data.themeBackgroundLightness).map(function(value) {
+                    return (value || 0) + (i == 0 ? 16 : -16);
                 });
             });
-            color = Ox.rgb(value, 1, data.themeColorLightness);
+            color = Ox.rgb(value || 0, saturation, data.themeColorLightness);
         }
         $element = $('<div>')
             .addClass(
@@ -134,7 +135,7 @@ Ox.Theme = (function() {
     that.formatColor = function(value, type) {
         return renderElement(value, type)
             .css({textAlign: 'center'})
-            .html(Ox.formatNumber(value, 3));
+            .html(value === null ? '' : Ox.formatNumber(value, 3));
     };
 
     /*@