diff --git a/changelog.md b/changelog.md
index b29aebb..13f89a3 100644
--- a/changelog.md
+++ b/changelog.md
@@ -767,3 +767,4 @@ See https://github.com/Daveiano/weewx-wdc/compare/v3.3.0...580071ca175a03fe4924b
 - Added option to set default theme (light/dark/auto) GH-241
 - Added per-month statistic tables GH-215
 - Added `windRose_legend_show_units` to hide the units in the windRose legend, added `hide_tick_unit` for gauges GH-249
+- Added colored Temperature GH-243
diff --git a/install.py b/install.py
index 8ab4033..9ba46b8 100644
--- a/install.py
+++ b/install.py
@@ -67,6 +67,7 @@ def __init__(self):
                         "skins/weewx-wdc/dist/main.css",
                         "skins/weewx-wdc/dist/main.js",
                         "skins/weewx-wdc/dist/live-updates.js",
+                        "skins/weewx-wdc/dist/colored-temperature.js",
                         "skins/weewx-wdc/dist/assets/IBMPlexMono-Regular.woff2",
                         "skins/weewx-wdc/dist/assets/IBMPlexMono-Regular.woff",
                         "skins/weewx-wdc/dist/assets/IBMPlexSans-Regular.woff2",
diff --git a/skins/weewx-wdc/includes/html-head.inc b/skins/weewx-wdc/includes/html-head.inc
index a18c57e..58cf542 100644
--- a/skins/weewx-wdc/includes/html-head.inc
+++ b/skins/weewx-wdc/includes/html-head.inc
@@ -85,7 +85,11 @@
     },
     locale: "$get_locale()",
     time: $datetime.datetime.now().timestamp(),
-    defaultTheme: '$DisplayOptions.get("default_theme", "auto")'
+    defaultTheme: '$DisplayOptions.get("default_theme", "auto")',
+    color_temperature: $to_int($to_bool($DisplayOptions.get("outTemp_stat_tile_color", "False"))),
+    color_temperature_transparency: $DisplayOptions.get("outTemp_stat_tile_color_transparency", "0.5"),
+    color_temperature_min: $DisplayOptions.get("outTemp_stat_tile_color_min", "-20"),
+    color_temperature_max: $DisplayOptions.get("outTemp_stat_tile_color_max", "40"),
   };
 </script>
 
diff --git a/skins/weewx-wdc/index.html.tmpl b/skins/weewx-wdc/index.html.tmpl
index 411ae9f..9f2993d 100644
--- a/skins/weewx-wdc/index.html.tmpl
+++ b/skins/weewx-wdc/index.html.tmpl
@@ -1,4 +1,3 @@
-<!--prettier-ignore-->
 #errorCatcher Echo
 #encoding UTF-8
 #attr $context = 'day'
@@ -26,7 +25,6 @@
             <header class="bx--col page-header">
               <h1>$gettext("Current Weather Conditions")</h1>
               <h2>$current.dateTime</h2>
-              <!--prettier-ignore-->
               #if $to_bool($Extras['mqtt']['mqtt_websockets_enabled'])
               #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
                 #set $mqtt_notfication_classes = "bx--col-sm-4 bx--col-md-8 bx--col-lg-6 bx--col-xlg-6 bx--col-max-6"
@@ -59,7 +57,6 @@
             </header>
           </div>
 
-          <!--prettier-ignore-->
           #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
             #include 'includes/body-alternative.inc'
           #else
@@ -159,6 +156,10 @@
 
     #include "includes/footer.inc"
 
+    #if $to_bool($DisplayOptions.get("outTemp_stat_tile_color", "False"))
+    <script src="$get_base_path(path='dist/colored-temperature.js')" defer></script>
+    #end if
+
     <script src="$get_base_path(path='dist/main.js')" defer></script>
     #if $to_bool($Extras['mqtt']['mqtt_websockets_enabled'])
     <script>
diff --git a/skins/weewx-wdc/skin.conf b/skins/weewx-wdc/skin.conf
index 489a032..d188e67 100644
--- a/skins/weewx-wdc/skin.conf
+++ b/skins/weewx-wdc/skin.conf
@@ -149,6 +149,12 @@ SKIN_VERSION = 3.5.0-alpha1
     show_min_max_time_week = False
     show_min_max_time_month = False
 
+    # Color the outTemp stat tile based on the temperature. Only available for alternative layout.
+    outTemp_stat_tile_color = False
+    outTemp_stat_tile_color_transparency = 0.35
+    outTemp_stat_tile_color_min = -20
+    outTemp_stat_tile_color_max = 40
+
     # windDir as oridnals (N, E, S, W).
     stat_tile_winddir_ordinal = True
     diagram_tile_winddir_ordinal = True
@@ -684,7 +690,7 @@ SKIN_VERSION = 3.5.0-alpha1
         daily_archive = %Y-%m-%d
 
 [CopyGenerator]
-    copy_once = dist/main.js, dist/main.css, plotly-custom-build.min.js, dist/live-updates.js, favicon.ico, icon-192x192.png, icon-256x256.png, icon-384x384.png, icon-512x512.png, service-worker.js, dist/assets
+    copy_once = dist/main.js, dist/main.css, plotly-custom-build.min.js, dist/live-updates.js, dist/colored-temperature.js, favicon.ico, icon-192x192.png, icon-256x256.png, icon-384x384.png, icon-512x512.png, service-worker.js, dist/assets
     # copy_always =
 
 [Generators]
diff --git a/skins/weewx-wdc/src/js/colored-temperature.ts b/skins/weewx-wdc/src/js/colored-temperature.ts
new file mode 100644
index 0000000..085d20a
--- /dev/null
+++ b/skins/weewx-wdc/src/js/colored-temperature.ts
@@ -0,0 +1,124 @@
+const transperancy = (window as any).weewxWdcConfig
+  .color_temperature_transparency;
+const min = (window as any).weewxWdcConfig.color_temperature_min;
+const max = (window as any).weewxWdcConfig.color_temperature_max;
+
+// outTemp tile.
+const outTempTile = document.querySelector(
+  'div.stat-tile[data-observation="outTemp"]'
+) as HTMLDivElement;
+
+/**
+ * Get temperature color, algorithm 1.
+ *
+ * @see https://stackoverflow.com/a/16468491
+ *
+ * @param string temp
+ * @returns string
+ */
+const getTemperatureColorHSL = (temp: number): string => {
+  const hue = 30 + (240 * (30 - temp)) / 60;
+
+  return `hsla(${hue}, 75%, 50%, ${transperancy})`;
+};
+
+/**
+ * Get temperature color, algorithm 2.
+ *
+ * @see https://wenktec.de/6482
+ *
+ * @param t
+ * @returns
+ */
+const getTemperatureColorRGB = (t: number): string => {
+  if (t < min) t = min;
+  if (t > max) t = max;
+
+  t = Math.round(((t - min) / (max - min)) * 600);
+  let m = Math.round((t / 100 - Math.floor((t - 1) / 100)) * 600);
+
+  if (t == 0) {
+    m = 0;
+  }
+
+  const n = m * 0.425;
+  let r = 0,
+    g = 0,
+    b = 0;
+
+  const FF = 255;
+
+  if (t <= 100) {
+    r = Math.round(FF - n) + Math.floor(n / 4);
+    g = Math.floor(n / 4);
+    b = FF;
+  } else if (t > 100 && t <= 200) {
+    r = Math.floor(n / 4);
+    g = Math.round(n) + Math.floor(n / 4);
+    b = FF;
+  } else if (t > 200 && t <= 300) {
+    r = Math.floor(n / 4);
+    g = FF;
+    b = Math.round(FF - n);
+  } else if (t > 300 && t <= 400) {
+    r = Math.round(n + n / 4);
+    g = FF;
+  } else if (t > 400 && t <= 500) {
+    r = FF;
+    g = Math.round(FF - n);
+  } else {
+    r = FF;
+    b = Math.round(n);
+  }
+
+  if (r > FF) r = FF;
+  if (g > FF) g = FF;
+
+  return `rgba(${r}, ${g}, ${b}, ${transperancy})`;
+};
+
+/**
+ * Set color for outTemp tile.
+ *
+ * @param HTMLDivElement outTempTile
+ */
+const setColor = (outTempTile: HTMLDivElement): void => {
+  const unit: string = outTempTile.dataset.unit as string;
+  const outTemp = parseFloat(
+    outTempTile
+      .querySelector(".stat-title-obs-value .raw")
+      ?.textContent?.replace(unit, "")
+      .replace(",", ".") || "0"
+  );
+
+  const outTempColor = getTemperatureColorRGB(outTemp);
+  outTempTile.style.backgroundColor = outTempColor;
+};
+
+// Set color for outTemp tile on load.
+if (outTempTile && outTempTile.dataset.unit) {
+  setColor(outTempTile);
+}
+
+// Set color for outTemp tile on change (MQTT).
+const observer = new MutationObserver(function () {
+  if (outTempTile && outTempTile.dataset.unit) {
+    setColor(outTempTile);
+  }
+});
+
+observer.observe(
+  outTempTile.querySelector(".stat-title-obs-value .raw") as HTMLDivElement,
+  {
+    characterData: true,
+    childList: true,
+  }
+);
+
+/**
+ * Test with:
+ * document.querySelector(
+  'div.stat-tile[data-observation="outTemp"] .stat-title-obs-value .raw'
+).innerHTML = '-14,5 °C';
+ *
+ */
diff --git a/skins/weewx-wdc/src/scss/index.scss b/skins/weewx-wdc/src/scss/index.scss
index f486d97..93e4886 100644
--- a/skins/weewx-wdc/src/scss/index.scss
+++ b/skins/weewx-wdc/src/scss/index.scss
@@ -529,6 +529,7 @@ a.stat-tile-link * {
 .stat-tile {
   margin-bottom: $spacing-05;
   height: calc(100% - #{$spacing-05});
+  transition: background-color 350ms ease;
   bx-tooltip-definition {
     padding-bottom: $spacing-01;
   }
diff --git a/test/e2e-tests/basic/colored-temperature.test.ts b/test/e2e-tests/basic/colored-temperature.test.ts
new file mode 100644
index 0000000..6dfc550
--- /dev/null
+++ b/test/e2e-tests/basic/colored-temperature.test.ts
@@ -0,0 +1,49 @@
+import { test, expect, type Page } from "@playwright/test";
+
+test.describe("Colored temperature", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("artifacts-mqtt-weewx-html/public_html/index.html");
+  });
+
+  test("Temperature color", async ({ page }) => {
+    const outTemp = page.locator(".stat-tile[data-test='outTemp']");
+
+    await expect(outTemp).toHaveScreenshot();
+    await expect(outTemp).toHaveCSS(
+      "background-color",
+      "rgba(255, 232, 0, 0.35)"
+    );
+
+    const outTempRawValue = outTemp.locator(".stat-title-obs-value .raw");
+
+    await outTempRawValue.evaluate((node) => (node.innerHTML = "-40,0 °C"));
+    await expect(outTemp).toHaveCSS(
+      "background-color",
+      "rgba(255, 0, 255, 0.35)"
+    );
+
+    await outTempRawValue.evaluate((node) => (node.innerHTML = "-20,0 °C"));
+    await expect(outTemp).toHaveCSS(
+      "background-color",
+      "rgba(255, 0, 255, 0.35)"
+    );
+
+    await outTempRawValue.evaluate((node) => (node.innerHTML = "0,0 °C"));
+    await expect(outTemp).toHaveCSS(
+      "background-color",
+      "rgba(63, 255, 255, 0.35)"
+    );
+
+    await outTempRawValue.evaluate((node) => (node.innerHTML = "20,0 °C"));
+    await expect(outTemp).toHaveCSS(
+      "background-color",
+      "rgba(255, 255, 0, 0.35)"
+    );
+
+    await outTempRawValue.evaluate((node) => (node.innerHTML = "35,0 °C"));
+    await expect(outTemp).toHaveCSS(
+      "background-color",
+      "rgba(255, 0, 128, 0.35)"
+    );
+  });
+});
diff --git a/test/e2e-tests/basic/colored-temperature.test.ts-snapshots/Colored-temperature-Temperature-color-1-chromium-linux.png b/test/e2e-tests/basic/colored-temperature.test.ts-snapshots/Colored-temperature-Temperature-color-1-chromium-linux.png
new file mode 100644
index 0000000..b1e5ba9
Binary files /dev/null and b/test/e2e-tests/basic/colored-temperature.test.ts-snapshots/Colored-temperature-Temperature-color-1-chromium-linux.png differ
diff --git a/test/test_install_report/install_report_test.sh b/test/test_install_report/install_report_test.sh
index 9f9c1d3..42d4d23 100755
--- a/test/test_install_report/install_report_test.sh
+++ b/test/test_install_report/install_report_test.sh
@@ -223,7 +223,7 @@ testWeeReportRunMqtt() {
     assertContains "$output" "Using configuration file /home/weewx/weewx.conf"
     assertContains "$output" "Generating as of last timestamp in the database."
     assertContains "$output" "INFO weewx.cheetahgenerator: Generated 32 files for report WdcReport in"
-    assertContains "$output" "INFO weewx.reportengine: Copied 18 files to /home/weewx/public_html"
+    assertContains "$output" "INFO weewx.reportengine: Copied 19 files to /home/weewx/public_html"
 
     assertNotContains "$output" "failed with exception"
     assertNotContains "$output" "Ignoring template"
diff --git a/test/test_install_report/src/skin-mqtt.conf b/test/test_install_report/src/skin-mqtt.conf
index b38b621..d6819d3 100644
--- a/test/test_install_report/src/skin-mqtt.conf
+++ b/test/test_install_report/src/skin-mqtt.conf
@@ -85,6 +85,11 @@ SKIN_VERSION = 2.3.0
     stat_tiles_show_max = rainRate, hailRate, snowRate, UV
     stat_tiles_show_sum = rain, ET, hail, snow, lightning_strike_count, windrun
 
+    outTemp_stat_tile_color = True
+    outTemp_stat_tile_color_transparency = 0.35
+    outTemp_stat_tile_color_min = -20
+    outTemp_stat_tile_color_max = 40
+
     # Stat tiles: show time when the min/max was reached.
     show_min_max_time_day = False
     show_min_max_time_yesterday = False
@@ -529,7 +534,7 @@ SKIN_VERSION = 2.3.0
         daily_archive = %Y-%m-%d
 
 [CopyGenerator]
-    copy_once = dist/main.js, dist/main.css, dist/live-updates.js, plotly-custom-build.min.js, favicon.ico, icon-192x192.png, icon-256x256.png, icon-384x384.png, icon-512x512.png, service-worker.js, dist/assets
+    copy_once = dist/main.js, dist/main.css, dist/live-updates.js, dist/colored-temperature.js, plotly-custom-build.min.js, favicon.ico, icon-192x192.png, icon-256x256.png, icon-384x384.png, icon-512x512.png, service-worker.js, dist/assets
     # copy_always =
 
 [Generators]
diff --git a/webpack.config.js b/webpack.config.js
index bd4534a..df23176 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -13,6 +13,10 @@ module.exports = {
       __dirname,
       "skins/weewx-wdc/src/js/live-updates.ts"
     ),
+    "colored-temperature": path.resolve(
+      __dirname,
+      "skins/weewx-wdc/src/js/colored-temperature.ts"
+    ),
   },
   module: {
     rules: [