diff --git a/src/common/color/convert-light-color.ts b/src/common/color/convert-light-color.ts
index 3ca78f6c5c76..5834151bf674 100644
--- a/src/common/color/convert-light-color.ts
+++ b/src/common/color/convert-light-color.ts
@@ -58,10 +58,10 @@ const matchMaxScale = (
   return outputColors.map((value) => Math.round(value * factor));
 };
 
-const mired2kelvin = (miredTemperature: number) =>
+export const mired2kelvin = (miredTemperature: number) =>
   Math.floor(1000000 / miredTemperature);
 
-const kelvin2mired = (kelvintTemperature: number) =>
+export const kelvin2mired = (kelvintTemperature: number) =>
   Math.floor(1000000 / kelvintTemperature);
 
 export const rgbww2rgb = (
diff --git a/src/components/ha-selector/ha-selector-color-temp.ts b/src/components/ha-selector/ha-selector-color-temp.ts
index f896c5fc5e5b..ba5f862950fd 100644
--- a/src/components/ha-selector/ha-selector-color-temp.ts
+++ b/src/components/ha-selector/ha-selector-color-temp.ts
@@ -1,9 +1,13 @@
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { ColorTempSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import "../ha-labeled-slider";
+import { generateColorTemperatureGradient } from "../../dialogs/more-info/components/lights/light-color-temp-picker";
+import { mired2kelvin } from "../../common/color/convert-light-color";
 
 @customElement("ha-selector-color_temp")
 export class HaColorTempSelector extends LitElement {
@@ -22,13 +26,21 @@ export class HaColorTempSelector extends LitElement {
   @property({ type: Boolean }) public required = true;
 
   protected render() {
+    const min = this.selector.color_temp?.min_mireds ?? 153;
+    const max = this.selector.color_temp?.max_mireds ?? 500;
+
+    const gradient = this._generateTemperatureGradient(min, max);
+
     return html`
       <ha-labeled-slider
+        style=${styleMap({
+          "--ha-slider-background": `linear-gradient( to var(--float-end), ${gradient})`,
+        })}
         labeled
         icon="hass:thermometer"
         .caption=${this.label || ""}
-        .min=${this.selector.color_temp?.min_mireds ?? 153}
-        .max=${this.selector.color_temp?.max_mireds ?? 500}
+        .min=${min}
+        .max=${max}
         .value=${this.value}
         .disabled=${this.disabled}
         .helper=${this.helper}
@@ -38,22 +50,16 @@ export class HaColorTempSelector extends LitElement {
     `;
   }
 
+  private _generateTemperatureGradient = memoizeOne(
+    (min: number, max: number) =>
+      generateColorTemperatureGradient(mired2kelvin(min), mired2kelvin(max))
+  );
+
   private _valueChanged(ev: CustomEvent) {
     fireEvent(this, "value-changed", {
       value: Number((ev.detail as any).value),
     });
   }
-
-  static styles = css`
-    ha-labeled-slider {
-      --ha-slider-background: linear-gradient(
-        to var(--float-end),
-        rgb(255, 160, 0) 0%,
-        white 50%,
-        rgb(166, 209, 255) 100%
-      );
-    }
-  `;
 }
 
 declare global {