diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts
index 04eda69abe..6a058ddb24 100644
--- a/src/panels/lovelace/cards/hui-button-card.ts
+++ b/src/panels/lovelace/cards/hui-button-card.ts
@@ -193,8 +193,10 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
                 .icon=${this._config.icon}
                 .state=${stateObj}
                 style=${styleMap({
-                  color: colored ? this._computeColor(stateObj) : "",
-                  filter: colored ? this._computeBrightness(stateObj) : "",
+                  color: colored ? this._computeColor(stateObj) : undefined,
+                  filter: colored
+                    ? this._computeBrightness(stateObj)
+                    : undefined,
                   height: this._config.icon_height
                     ? this._config.icon_height
                     : "",
diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts
index ad00698ae6..401c689bd5 100644
--- a/src/panels/lovelace/cards/hui-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-card.ts
@@ -29,6 +29,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { formatAttributeValue } from "../../../data/entity_attributes";
+import { LightEntity } from "../../../data/light";
 import { HomeAssistant } from "../../../types";
 import { computeCardSize } from "../common/compute-card-size";
 import { findEntities } from "../common/find-entities";
@@ -149,6 +150,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
               data-state=${stateObj.state}
               style=${styleMap({
                 color: colored ? this._computeColor(stateObj) : undefined,
+                filter: colored ? this._computeBrightness(stateObj) : undefined,
                 height: this._config.icon_height
                   ? this._config.icon_height
                   : "",
@@ -201,6 +203,9 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
       }
       return undefined;
     }
+    if (stateObj.attributes.rgb_color && stateActive(stateObj)) {
+      return `rgb(${stateObj.attributes.rgb_color.join(",")})`;
+    }
     const iconColor = stateColorCss(stateObj);
     if (iconColor) {
       return `rgb(${iconColor})`;
@@ -208,6 +213,14 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
     return undefined;
   }
 
+  private _computeBrightness(stateObj: HassEntity | LightEntity): string {
+    if (stateObj.attributes.brightness && stateActive(stateObj)) {
+      const brightness = stateObj.attributes.brightness;
+      return `brightness(${(brightness + 245) / 5}%)`;
+    }
+    return "";
+  }
+
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     // Side Effect used to update footer hass while keeping optimizations
     if (this._footerElement) {