diff --git a/src/more-infos/more-info-light.html b/src/more-infos/more-info-light.html
index 123eeb5c3f..1af4c7c7b6 100644
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@@ -5,7 +5,7 @@
 
 <dom-module id='more-info-light'>
   <style>
-    .brightness {
+    .brightness, .color_temp {
       margin-bottom: 8px;
 
       max-height: 0px;
@@ -27,6 +27,10 @@
       max-height: 40px;
     }
 
+    .has-color_temp .color_temp {
+      max-height: 40px;
+    }
+
     .has-xy_color ha-color-picker {
       max-height: 500px;
     }
@@ -40,9 +44,17 @@
           on-change='brightnessSliderChanged' class='flex'>
         </paper-slider>
       </div>
+      <div class='color_temp center horizontal layout'>
+        <div>Color temperature</div>
+        <paper-slider min="154" max="500"
+          id='color_temp' value='{{ctSliderValue}}'
+          on-change='ctSliderChanged' class='flex'>
+        </paper-slider>
+      </div>
 
       <ha-color-picker on-colorselected='colorPicked' width='350' height='200'>
-      </color-picker>
+      </ha-color-picker>
+
     </div>
   </template>
 </dom-module>
diff --git a/src/more-infos/more-info-light.js b/src/more-infos/more-info-light.js
index 552be2e7f4..a37dbaa690 100644
--- a/src/more-infos/more-info-light.js
+++ b/src/more-infos/more-info-light.js
@@ -5,7 +5,7 @@ import attributeClassNames from '../util/attribute-class-names';
 
 require('../components/ha-color-picker');
 
-const ATTRIBUTE_CLASSES = ['brightness', 'xy_color'];
+const ATTRIBUTE_CLASSES = ['brightness', 'xy_color', 'color_temp'];
 
 export default new Polymer({
   is: 'more-info-light',
@@ -20,11 +20,17 @@ export default new Polymer({
       type: Number,
       value: 0,
     },
+
+    ctSliderValue: {
+      type: Number,
+      value: 0,
+    },
   },
 
   stateObjChanged(newVal) {
     if (newVal && newVal.state === 'on') {
       this.brightnessSliderValue = newVal.attributes.brightness;
+      this.ctSliderValue = newVal.attributes.color_temp;
     }
 
     this.async(() => this.fire('iron-resize'), 500);
@@ -49,6 +55,17 @@ export default new Polymer({
     }
   },
 
+  ctSliderChanged(ev) {
+    const ct = parseInt(ev.target.value, 10);
+
+    if (isNaN(ct)) return;
+
+    serviceActions.callService('light', 'turn_on', {
+      entity_id: this.stateObj.entityId,
+      color_temp: ct,
+    });
+  },
+
   colorPicked(ev) {
     const color = ev.detail.rgb;