diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts
index 972ea11ea7..99ab8a9575 100644
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -32,6 +32,8 @@ export class StateBadge extends LitElement {
 
   @property({ type: Boolean }) public stateColor?: boolean;
 
+  @property() public color?: string;
+
   @property({ type: Boolean, reflect: true, attribute: "icon" })
   private _showIcon = true;
 
@@ -75,7 +77,8 @@ export class StateBadge extends LitElement {
       !changedProps.has("stateObj") &&
       !changedProps.has("overrideImage") &&
       !changedProps.has("overrideIcon") &&
-      !changedProps.has("stateColor")
+      !changedProps.has("stateColor") &&
+      !changedProps.has("color")
     ) {
       return;
     }
@@ -106,6 +109,9 @@ export class StateBadge extends LitElement {
         }
         hostStyle.backgroundImage = `url(${imageUrl})`;
         this._showIcon = false;
+      } else if (this.color) {
+        // Externally provided overriding color wins over state color
+        iconStyle.color = this.color;
       } else if (this._stateColor && stateActive(stateObj)) {
         const color = stateColorCss(stateObj);
         if (color) {
diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts
index 01f95f88bb..7ee6c6ba39 100644
--- a/src/components/entity/state-info.ts
+++ b/src/components/entity/state-info.ts
@@ -19,6 +19,8 @@ class StateInfo extends LitElement {
   // property used only in CSS
   @property({ type: Boolean, reflect: true }) public rtl = false;
 
+  @property() public color?: string;
+
   protected render(): TemplateResult {
     if (!this.hass || !this.stateObj) {
       return html``;
@@ -26,9 +28,10 @@ class StateInfo extends LitElement {
 
     const name = computeStateName(this.stateObj);
 
-    return html`<state-badge
+    return html` <state-badge
         .stateObj=${this.stateObj}
         .stateColor=${true}
+        .color=${this.color}
       ></state-badge>
       <div class="info">
         <div class="name" .title=${name} .inDialog=${this.inDialog}>
diff --git a/src/panels/calendar/dialog-calendar-event-detail.ts b/src/panels/calendar/dialog-calendar-event-detail.ts
index ebe36d920c..adb732c08e 100644
--- a/src/panels/calendar/dialog-calendar-event-detail.ts
+++ b/src/panels/calendar/dialog-calendar-event-detail.ts
@@ -101,6 +101,7 @@ class DialogCalendarEventDetail extends LitElement {
             <state-info
               .hass=${this.hass}
               .stateObj=${stateObj}
+              .color=${this._params.color}
               inDialog
             ></state-info>
           </div>
diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts
index d3007ba5e6..f913ba78d0 100644
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/src/panels/calendar/ha-full-calendar.ts
@@ -312,6 +312,7 @@ export class HAFullCalendar extends LitElement {
       calendars: this.calendars,
       calendarId: info.event.extendedProps.calendar,
       entry: info.event.extendedProps.eventData,
+      color: info.event.backgroundColor,
       updated: () => {
         this._fireViewChanged();
       },
diff --git a/src/panels/calendar/show-dialog-calendar-event-detail.ts b/src/panels/calendar/show-dialog-calendar-event-detail.ts
index 9946ed9bdb..05306294b4 100644
--- a/src/panels/calendar/show-dialog-calendar-event-detail.ts
+++ b/src/panels/calendar/show-dialog-calendar-event-detail.ts
@@ -8,6 +8,7 @@ export interface CalendarEventDetailDialogParams {
   canDelete?: boolean;
   canEdit?: boolean;
   updated: () => void;
+  color?: string;
 }
 
 export const loadCalendarEventDetailDialog = () =>