diff --git a/src/components/ha-hs-color-picker.ts b/src/components/ha-hs-color-picker.ts
index a0b86fa6a5..76bd2a4c6c 100644
--- a/src/components/ha-hs-color-picker.ts
+++ b/src/components/ha-hs-color-picker.ts
@@ -317,9 +317,13 @@ class HaHsColorPicker extends LitElement {
     const cy = ((y + 1) * size) / 2;
 
     const markerPosition = `${cx}px, ${cy}px`;
-    const markerScale = this._pressed ? "1.5" : "1";
+    const markerScale = this._pressed
+      ? this._pressed === "touch"
+        ? "2.5"
+        : "1.5"
+      : "1";
     const markerOffset =
-      this._pressed === "touch" ? `0px, -${size / 8}px` : "0px, 0px";
+      this._pressed === "touch" ? `0px, -${size / 16}px` : "0px, 0px";
 
     return html`
       <div class="container ${classMap({ pressed: Boolean(this._pressed) })}">
diff --git a/src/components/ha-temp-color-picker.ts b/src/components/ha-temp-color-picker.ts
index 8e1309b0a9..c3e19707c6 100644
--- a/src/components/ha-temp-color-picker.ts
+++ b/src/components/ha-temp-color-picker.ts
@@ -305,9 +305,13 @@ class HaTempColorPicker extends LitElement {
     const cy = ((y + 1) * size) / 2;
 
     const markerPosition = `${cx}px, ${cy}px`;
-    const markerScale = this._pressed ? "1.5" : "1";
+    const markerScale = this._pressed
+      ? this._pressed === "touch"
+        ? "2.5"
+        : "1.5"
+      : "1";
     const markerOffset =
-      this._pressed === "touch" ? `0px, -${size / 8}px` : "0px, 0px";
+      this._pressed === "touch" ? `0px, -${size / 16}px` : "0px, 0px";
 
     return html`
       <div class="container ${classMap({ pressed: Boolean(this._pressed) })}">