diff --git a/src/components/ha-color-picker.js b/src/components/ha-color-picker.js
index 1d177e60b7..63b5922a9c 100644
--- a/src/components/ha-color-picker.js
+++ b/src/components/ha-color-picker.js
@@ -96,35 +96,35 @@ export default new Polymer({
     this.mouseMoveIsThrottled = true;
     this.canvas = this.children[0];
     this.context = this.canvas.getContext('2d');
-
-    this.debounce('drawGradient', () => {
-      let style;
-      if (!this.width || !this.height) {
-        style = getComputedStyle(this);
-      }
-      const width = this.width || parseInt(style.width, 10);
-      const height = this.height || parseInt(style.height, 10);
-
-      const colorGradient = this.context.createLinearGradient(0, 0, width, 0);
-      colorGradient.addColorStop(0, 'rgb(255,0,0)');
-      colorGradient.addColorStop(0.16, 'rgb(255,0,255)');
-      colorGradient.addColorStop(0.32, 'rgb(0,0,255)');
-      colorGradient.addColorStop(0.48, 'rgb(0,255,255)');
-      colorGradient.addColorStop(0.64, 'rgb(0,255,0)');
-      colorGradient.addColorStop(0.80, 'rgb(255,255,0)');
-      colorGradient.addColorStop(1, 'rgb(255,0,0)');
-      this.context.fillStyle = colorGradient;
-      this.context.fillRect(0, 0, width, height);
-
-      const bwGradient = this.context.createLinearGradient(0, 0, 0, height);
-      bwGradient.addColorStop(0, 'rgba(255,255,255,1)');
-      bwGradient.addColorStop(0.5, 'rgba(255,255,255,0)');
-      bwGradient.addColorStop(0.5, 'rgba(0,0,0,0)');
-      bwGradient.addColorStop(1, 'rgba(0,0,0,1)');
-
-      this.context.fillStyle = bwGradient;
-      this.context.fillRect(0, 0, width, height);
-    }, 100);
+    this.drawGradient();
   },
 
+  drawGradient() {
+    let style;
+    if (!this.width || !this.height) {
+      style = getComputedStyle(this);
+    }
+    const width = this.width || parseInt(style.width, 10);
+    const height = this.height || parseInt(style.height, 10);
+
+    const colorGradient = this.context.createLinearGradient(0, 0, width, 0);
+    colorGradient.addColorStop(0, 'rgb(255,0,0)');
+    colorGradient.addColorStop(0.16, 'rgb(255,0,255)');
+    colorGradient.addColorStop(0.32, 'rgb(0,0,255)');
+    colorGradient.addColorStop(0.48, 'rgb(0,255,255)');
+    colorGradient.addColorStop(0.64, 'rgb(0,255,0)');
+    colorGradient.addColorStop(0.80, 'rgb(255,255,0)');
+    colorGradient.addColorStop(1, 'rgb(255,0,0)');
+    this.context.fillStyle = colorGradient;
+    this.context.fillRect(0, 0, width, height);
+
+    const bwGradient = this.context.createLinearGradient(0, 0, 0, height);
+    bwGradient.addColorStop(0, 'rgba(255,255,255,1)');
+    bwGradient.addColorStop(0.5, 'rgba(255,255,255,0)');
+    bwGradient.addColorStop(0.5, 'rgba(0,0,0,0)');
+    bwGradient.addColorStop(1, 'rgba(0,0,0,1)');
+
+    this.context.fillStyle = bwGradient;
+    this.context.fillRect(0, 0, width, height);
+  },
 });
diff --git a/src/more-infos/more-info-light.html b/src/more-infos/more-info-light.html
index 5bcefba82a..f5b4b10dc4 100644
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@@ -6,8 +6,6 @@
 <dom-module id='more-info-light'>
   <style>
     .brightness, .color_temp {
-      margin-bottom: 8px;
-
       max-height: 0px;
       overflow: hidden;
       transition: max-height .5s ease-in;
@@ -15,20 +13,17 @@
 
     ha-color-picker {
       display: block;
-      max-width: 350px;
-      height: 200px;
       margin: 0 auto;
+      width: 250px;
 
       max-height: 0px;
       overflow: hidden;
       transition: max-height .2s ease-in;
     }
 
-    .has-brightness .brightness {
-      max-height: 40px;
-    }
-
+    .has-brightness .brightness,
     .has-color_temp .color_temp {
+      margin-bottom: 8px;
       max-height: 40px;
     }
 
@@ -53,7 +48,7 @@
         </paper-slider>
       </div>
 
-      <ha-color-picker on-colorselected='colorPicked' height='200'>
+      <ha-color-picker on-colorselected='colorPicked' height='200' width='250'>
       </ha-color-picker>
     </div>
   </template>