diff --git a/src/common/color/colors.ts b/src/common/color/colors.ts
index d70aa5ce6a..fd9de4d3df 100644
--- a/src/common/color/colors.ts
+++ b/src/common/color/colors.ts
@@ -1,5 +1,5 @@
 export const COLORS = [
-  "#377eb8",
+  "#44739e",
   "#984ea3",
   "#00d2d5",
   "#ff7f00",
diff --git a/src/common/const.ts b/src/common/const.ts
index dd4eace281..98bf07b75a 100644
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -157,66 +157,3 @@ export const UNIT_F = "°F";
 
 /** Entity ID of the default view. */
 export const DEFAULT_VIEW_ENTITY_ID = "group.default_view";
-
-/** HA Color Pallete. */
-export const HA_COLOR_PALETTE = [
-  "ff0029",
-  "66a61e",
-  "377eb8",
-  "984ea3",
-  "00d2d5",
-  "ff7f00",
-  "af8d00",
-  "7f80cd",
-  "b3e900",
-  "c42e60",
-  "a65628",
-  "f781bf",
-  "8dd3c7",
-  "bebada",
-  "fb8072",
-  "80b1d3",
-  "fdb462",
-  "fccde5",
-  "bc80bd",
-  "ffed6f",
-  "c4eaff",
-  "cf8c00",
-  "1b9e77",
-  "d95f02",
-  "e7298a",
-  "e6ab02",
-  "a6761d",
-  "0097ff",
-  "00d067",
-  "f43600",
-  "4ba93b",
-  "5779bb",
-  "927acc",
-  "97ee3f",
-  "bf3947",
-  "9f5b00",
-  "f48758",
-  "8caed6",
-  "f2b94f",
-  "eff26e",
-  "e43872",
-  "d9b100",
-  "9d7a00",
-  "698cff",
-  "d9d9d9",
-  "00d27e",
-  "d06800",
-  "009f82",
-  "c49200",
-  "cbe8ff",
-  "fecddf",
-  "c27eb6",
-  "8cd2ce",
-  "c4b8d9",
-  "f883b0",
-  "a49100",
-  "f48800",
-  "27d0df",
-  "a04a9b",
-];
diff --git a/src/data/calendar.ts b/src/data/calendar.ts
index 4ebc4bb23b..67506ac19b 100644
--- a/src/data/calendar.ts
+++ b/src/data/calendar.ts
@@ -1,4 +1,4 @@
-import { HA_COLOR_PALETTE } from "../common/const";
+import { getColorByIndex } from "../common/color/colors";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
 import type { CalendarEvent, HomeAssistant } from "../types";
@@ -81,5 +81,5 @@ export const getCalendars = (hass: HomeAssistant): Calendar[] =>
     .map((eid, idx) => ({
       entity_id: eid,
       name: computeStateName(hass.states[eid]),
-      backgroundColor: `#${HA_COLOR_PALETTE[idx % HA_COLOR_PALETTE.length]}`,
+      backgroundColor: getColorByIndex(idx),
     }));
diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts
index 13b5bcc8b3..84436c04b4 100644
--- a/src/panels/lovelace/cards/hui-calendar-card.ts
+++ b/src/panels/lovelace/cards/hui-calendar-card.ts
@@ -7,7 +7,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
-import { HA_COLOR_PALETTE } from "../../../common/const";
+import { getColorByIndex } from "../../../common/color/colors";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { debounce } from "../../../common/util/debounce";
@@ -86,7 +86,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
 
     this._calendars = config!.entities.map((entity, idx) => ({
       entity_id: entity,
-      backgroundColor: `#${HA_COLOR_PALETTE[idx % HA_COLOR_PALETTE.length]}`,
+      backgroundColor: getColorByIndex(idx),
     }));
 
     if (this._config?.entities !== config.entities) {
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index f7b0acac80..a570a73c22 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -70,7 +70,7 @@ documentContainer.innerHTML = `<custom-style>
       --state-not_home-color: #ff0029;
       /* --state-unavailable-color: #a0a0a0; derived from disabled-text-color */
       --state-unknown-color: #606060;
-      --state-idle-color: #377eb8;
+      --state-idle-color: #7990a3;
 
       /* climate state colors */
       --state-climate-auto-color: #008000;