diff --git a/src/components/ha-labeled-slider.html b/src/components/ha-labeled-slider.html
index 878b9df6ea..c3befd3c64 100644
--- a/src/components/ha-labeled-slider.html
+++ b/src/components/ha-labeled-slider.html
@@ -24,6 +24,10 @@
       .slider-container {
         margin-left: 24px;
       }
+
+      paper-slider {
+        background-image: var(--ha-slider-background);
+      }
     </style>
 
     <div class='title'>[[caption]]</div>
diff --git a/src/more-infos/more-info-light.html b/src/more-infos/more-info-light.html
index 277ae75860..3971ab96f9 100644
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@@ -23,6 +23,10 @@
         transition: max-height .5s ease-in;
       }
 
+      .color_temp {
+        --ha-slider-background: -webkit-linear-gradient(right, rgb(255, 160, 0) 0%, white 50%, rgb(166, 209, 255) 100%);
+      }
+
       ha-color-picker {
         display: block;
         width: 250px;
@@ -146,17 +150,25 @@ Polymer({
     }
   },
 
+  featureClassNames: {
+    1: 'has-brightness',
+  },
+
   computeClassNames: function (stateObj) {
-    var classes = window.hassUtil.attributeClassNames(
-      stateObj, ['rgb_color', 'color_temp', 'white_value',
-        'effect_list']);
-    var BRIGHTNESS_SUPPORTED = 1;
-    // If brightness is supported - show the slider even if the attribute is
-    // missing (because the light is off).
-    if (stateObj && (stateObj.attributes.supported_features & BRIGHTNESS_SUPPORTED)) {
-      classes += ' has-brightness';
+    var classes = [
+      window.hassUtil.attributeClassNames(
+        stateObj, ['color_temp', 'white_value', 'effect_list']),
+      window.hassUtil.featureClassNames(stateObj, this.featureClassNames),
+    ];
+
+    // Lights that do shades of white can still have an rgb color
+    // In that case we don't want the color picker to show.
+    if (stateObj.attributes.supported_features &&
+        (stateObj.attributes.supported_features & 16) !== 0 &&
+        stateObj.attributes.rgb_color) {
+      classes.push('has-rgb_color');
     }
-    return classes;
+    return classes.join(' ');
   },
 
   effectChanged: function (effectIndex) {
diff --git a/src/util/hass-util.html b/src/util/hass-util.html
index becdeab307..1efc17c566 100644
--- a/src/util/hass-util.html
+++ b/src/util/hass-util.html
@@ -46,6 +46,20 @@ window.hassUtil.attributeClassNames = function (stateObj, attributes) {
   ).join(' ');
 };
 
+// Expects featureClassNames to be an object mapping feature-bit -> className
+window.hassUtil.featureClassNames = function (stateObj, featureClassNames) {
+  if (!stateObj || !stateObj.attributes.supported_features) return '';
+
+  var features = stateObj.attributes.supported_features;
+
+  return Object.keys(featureClassNames).map(
+    function (feature) {
+      return (features & feature) !== 0 ? featureClassNames[feature] : '';
+    }
+  ).join(' ');
+};
+
+
 window.hassUtil.canToggleState = function (hass, stateObj) {
   var domain = window.hassUtil.computeDomain(stateObj);
   if (domain === 'group') {