diff --git a/gallery/src/pages/misc/entity-state.ts b/gallery/src/pages/misc/entity-state.ts
index ae12a09abe..2d3326c3b7 100644
--- a/gallery/src/pages/misc/entity-state.ts
+++ b/gallery/src/pages/misc/entity-state.ts
@@ -106,6 +106,7 @@ const ENTITIES: HassEntity[] = [
   // Alert
   createEntity("alert.off", "off"),
   createEntity("alert.on", "on"),
+  createEntity("alert.idle", "idle"),
   // Automation
   createEntity("automation.off", "off"),
   createEntity("automation.on", "on"),
diff --git a/src/common/entity/color/alert_color.ts b/src/common/entity/color/alert_color.ts
new file mode 100644
index 0000000000..3e3ccbe6a4
--- /dev/null
+++ b/src/common/entity/color/alert_color.ts
@@ -0,0 +1,10 @@
+export const alertColor = (state?: string): string | undefined => {
+  switch (state) {
+    case "on":
+      return "alert";
+    case "off":
+      return "alert-off";
+    default:
+      return undefined;
+  }
+};
diff --git a/src/common/entity/state_active.ts b/src/common/entity/state_active.ts
index 415be5f055..2c673f3a6b 100644
--- a/src/common/entity/state_active.ts
+++ b/src/common/entity/state_active.ts
@@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { OFF_STATES, UNAVAILABLE } from "../../data/entity";
+import { OFF, UNAVAILABLE, UNAVAILABLE_STATES } from "../../data/entity";
 import { computeDomain } from "./compute_domain";
 
 export function stateActive(stateObj: HassEntity, state?: string): boolean {
@@ -10,7 +10,15 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
     return compareState !== UNAVAILABLE;
   }
 
-  if (OFF_STATES.includes(compareState)) {
+  if (UNAVAILABLE_STATES.includes(compareState)) {
+    return false;
+  }
+
+  // The "off" check is relevant for most domains, but there are exceptions
+  // such as "alert" where "off" is still a somewhat active state and
+  // therefore gets a custom color and "idle" is instead the state that
+  // matches what most other domains consider inactive.
+  if (compareState === OFF && domain !== "alert") {
     return false;
   }
 
@@ -18,6 +26,9 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
   switch (domain) {
     case "alarm_control_panel":
       return compareState !== "disarmed";
+    case "alert":
+      // "on" and "off" are active, as "off" just means alert was acknowledged but is still active
+      return compareState !== "idle";
     case "cover":
       return !["closed", "closing"].includes(compareState);
     case "device_tracker":
@@ -37,7 +48,7 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
       return compareState === "active";
     case "camera":
       return compareState === "streaming";
-    default:
-      return true;
   }
+
+  return true;
 }
diff --git a/src/common/entity/state_color.ts b/src/common/entity/state_color.ts
index 613ce4e7d8..2815b23a16 100644
--- a/src/common/entity/state_color.ts
+++ b/src/common/entity/state_color.ts
@@ -2,6 +2,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE } from "../../data/entity";
 import { alarmControlPanelColor } from "./color/alarm_control_panel_color";
+import { alertColor } from "./color/alert_color";
 import { binarySensorColor } from "./color/binary_sensor_color";
 import { climateColor } from "./color/climate_color";
 import { lockColor } from "./color/lock_color";
@@ -12,7 +13,6 @@ import { computeDomain } from "./compute_domain";
 import { stateActive } from "./state_active";
 
 const STATIC_ACTIVE_COLORED_DOMAIN = new Set([
-  "alert",
   "automation",
   "calendar",
   "camera",
@@ -65,6 +65,9 @@ export const stateColor = (stateObj: HassEntity, state?: string) => {
     case "alarm_control_panel":
       return alarmControlPanelColor(compareState);
 
+    case "alert":
+      return alertColor(compareState);
+
     case "binary_sensor":
       return binarySensorColor(stateObj, compareState);
 
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 56eced1a57..18bac68682 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -145,6 +145,7 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-state-alarm-pending-color: var(--rgb-orange-color);
       --rgb-state-alarm-triggered-color: var(--rgb-red-color);
       --rgb-state-alert-color: var(--rgb-red-color);
+      --rgb-state-alert-off-color: var(--rgb-orange-color);
       --rgb-state-automation-color: var(--rgb-amber-color);
       --rgb-state-binary-sensor-alerting-color: var(--rgb-red-color);
       --rgb-state-binary-sensor-color: var(--rgb-amber-color);