diff --git a/src/components/ha-color-picker.js b/src/components/ha-color-picker.js
index 49fce6c7f5..a50601c0ea 100644
--- a/src/components/ha-color-picker.js
+++ b/src/components/ha-color-picker.js
@@ -176,6 +176,11 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
     this.drawColorWheel();
     this.drawMarker();
 
+    if (this.desiredHsColor) {
+      this.setMarkerOnColor(this.desiredHsColor);
+      this.applyColorToCanvas(this.desiredHsColor);
+    }
+
     this.interactionLayer.addEventListener("mousedown", (ev) =>
       this.onMouseDown(ev)
     );
@@ -319,6 +324,9 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
 
   // set marker position to the given color
   setMarkerOnColor(hs) {
+    if (!this.marker || !this.tooltip) {
+      return;
+    }
     const dist = hs.s * this.radius;
     const theta = ((hs.h - 180) / 180) * Math.PI;
     const markerdX = -dist * Math.cos(theta);
@@ -330,6 +338,9 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
 
   // apply given color to interface elements
   applyColorToCanvas(hs) {
+    if (!this.interactionLayer) {
+      return;
+    }
     // we're not really converting hs to hsl here, but we keep it cheap
     // setting the color on the interactionLayer, the svg elements can inherit
     this.interactionLayer.style.color = `hsl(${hs.h}, 100%, ${
diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts
index 6b0bba5572..772d0ea29d 100644
--- a/src/dialogs/more-info/controls/more-info-light.ts
+++ b/src/dialogs/more-info/controls/more-info-light.ts
@@ -134,7 +134,7 @@ class MoreInfoLight extends LitElement {
                         attr-for-selected="item-name"
                         >${this.stateObj.attributes.effect_list.map(
                           (effect: string) => html`
-                            <paper-item itemName=${effect}
+                            <paper-item .itemName=${effect}
                               >${effect}</paper-item
                             >
                           `
@@ -170,7 +170,7 @@ class MoreInfoLight extends LitElement {
   }
 
   private _effectChanged(ev: CustomEvent) {
-    const newVal = ev.detail.value;
+    const newVal = ev.detail.item.itemName;
 
     if (!newVal || this.stateObj!.attributes.effect === newVal) {
       return;