diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts
index 0a77c66b98..ff50844dc2 100644
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -13,7 +13,6 @@ import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
-import { stateActive } from "../../common/entity/state_active";
 import { stateColorCss } from "../../common/entity/state_color";
 import { iconColorCSS } from "../../common/style/icon_color_css";
 import { cameraUrlWithWidthHeight } from "../../data/camera";
@@ -112,7 +111,7 @@ export class StateBadge extends LitElement {
       } else if (this.color) {
         // Externally provided overriding color wins over state color
         iconStyle.color = this.color;
-      } else if (this._stateColor && stateActive(stateObj)) {
+      } else if (this._stateColor) {
         const color = stateColorCss(stateObj);
         if (color) {
           iconStyle.color = color;
@@ -173,6 +172,7 @@ export class StateBadge extends LitElement {
           line-height: 40px;
           vertical-align: middle;
           box-sizing: border-box;
+          --state-inactive-color: initial;
         }
         :host(:focus) {
           outline: none;
diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts
index b30b106c31..d16f20efc9 100644
--- a/src/panels/lovelace/cards/hui-button-card.ts
+++ b/src/panels/lovelace/cards/hui-button-card.ts
@@ -25,7 +25,6 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { iconColorCSS } from "../../../common/style/icon_color_css";
@@ -157,8 +156,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
       ? this._config.name || (stateObj ? computeStateName(stateObj) : "")
       : "";
 
-    const active = stateObj && stateActive(stateObj);
-    const colored = active && this.getStateColor(stateObj, this._config);
+    const colored = stateObj && this.getStateColor(stateObj, this._config);
 
     return html`
       <ha-card
@@ -291,6 +289,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
           height: auto;
           color: var(--paper-item-icon-color, #44739e);
           --mdc-icon-size: 100%;
+          --state-inactive-color: var(--paper-item-icon-color, #44739e);
         }
 
         ha-state-icon + span {
diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts
index 7bf7c526de..562b62bd39 100644
--- a/src/panels/lovelace/cards/hui-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-card.ts
@@ -15,7 +15,6 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import {
@@ -134,8 +133,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
 
     const name = this._config.name || computeStateName(stateObj);
 
-    const active = stateObj && stateActive(stateObj);
-    const colored = active && this.getStateColor(stateObj, this._config);
+    const colored = stateObj && this.getStateColor(stateObj, this._config);
 
     return html`
       <ha-card @click=${this._handleClick} tabindex="0">
@@ -202,7 +200,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
       }
       return undefined;
     }
-    if (stateObj.attributes.rgb_color && stateActive(stateObj)) {
+    if (stateObj.attributes.rgb_color) {
       return `rgb(${stateObj.attributes.rgb_color.join(",")})`;
     }
     const iconColor = stateColorCss(stateObj);
@@ -213,7 +211,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
   }
 
   private _computeBrightness(stateObj: HassEntity | LightEntity): string {
-    if (stateObj.attributes.brightness && stateActive(stateObj)) {
+    if (stateObj.attributes.brightness) {
       const brightness = stateObj.attributes.brightness;
       return `brightness(${(brightness + 245) / 5}%)`;
     }
@@ -284,7 +282,8 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
         }
 
         .icon {
-          color: var(--state-icon-color, #44739e);
+          color: var(--paper-item-icon-color, #44739e);
+          --state-inactive-color: var(--paper-item-icon-color, #44739e);
           line-height: 40px;
         }