diff --git a/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts
index f48a67f987..31509ee10b 100644
--- a/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts
@@ -52,10 +52,10 @@ export class DarkModeTheme implements ColorModeTheme {
       bgAccentSubtleActive: this.bgAccentSubtleActive.toString(),
       bgAssistive: this.bgAssistive.toString(),
       bgPositive: this.bgPositive.to("sRGB").toString(),
-      bgPositiveHover: this.bgPositiveHover.toString(),
-      bgPositiveActive: this.bgPositiveActive.toString(),
-      bgPositiveSubtleHover: this.bgPositiveSubtleHover.toString(),
-      bgPositiveSubtleActive: this.bgPositiveSubtleActive.toString(),
+      bgPositiveHover: this.bgPositiveHover.to("sRGB").toString(),
+      bgPositiveActive: this.bgPositiveActive.to("sRGB").toString(),
+      bgPositiveSubtleHover: this.bgPositiveSubtleHover.to("sRGB").toString(),
+      bgPositiveSubtleActive: this.bgPositiveSubtleActive.to("sRGB").toString(),
       bgNegative: this.bgNegative.to("sRGB").toString(),
       bgNegativeHover: this.bgNegativeHover.toString(),
       bgNegativeActive: this.bgNegativeActive.toString(),
@@ -253,24 +253,64 @@ export class DarkModeTheme implements ColorModeTheme {
     return color;
   }
 
+  // Positive background, green.
+  private get bgPositive() {
+    const color = new Color("oklch", [0.62, 0.17, 145]);
+
+    // If the seed color is also green, adjust positive by hue to make it distinct from accent.
+    if (this.seedIsGreen && this.seedColor.oklch.c > 0.09) {
+      if (this.seedColor.oklch.h < 145) {
+        color.oklch.h = 155;
+      }
+      if (this.seedColor.oklch.h >= 145) {
+        color.oklch.h = 135;
+      }
+    }
+
+    return color;
+  }
+
   private get bgPositiveHover() {
-    return "#3ec16c";
+    const color = this.bgPositive.clone();
+
+    // Lightness of bgPositive is known, no additional checks like in bgAccentHover
+    color.oklch.l = color.oklch.l + 0.03;
+
+    return color;
   }
 
   private get bgPositiveActive() {
-    return "#35a15c";
+    const color = this.bgPositive.clone();
+
+    // Lightness of bgPositive is known, no additional checks like in bgAccentActive
+    color.oklch.l = color.oklch.l - 0.04;
+
+    return color;
   }
 
   private get bgPositiveSubtle() {
-    return "#f0fff5";
+    const color = this.bgPositive.clone();
+
+    color.oklch.l = 0.3;
+    color.oklch.c = 0.08;
+
+    return color;
   }
 
   private get bgPositiveSubtleHover() {
-    return "#e0ffeb";
+    const color = this.bgPositiveSubtle.clone();
+
+    color.oklch.l = color.oklch.l + 0.03;
+
+    return color;
   }
 
   private get bgPositiveSubtleActive() {
-    return "#d1ffe1";
+    const color = this.bgPositiveSubtle.clone();
+
+    color.oklch.l = color.oklch.l - 0.02;
+
+    return color;
   }
 
   // Warning background, yellow
@@ -375,23 +415,6 @@ export class DarkModeTheme implements ColorModeTheme {
     return this.fg.clone();
   }
 
-  // Positive background, green.
-  private get bgPositive() {
-    const color = new Color("oklch", [0.62, 0.17, 145]);
-
-    // If the seed color is also green, adjust positive by hue to make it distinct from accent.
-    if (this.seedIsGreen && this.seedColor.oklch.c > 0.09) {
-      if (this.seedColor.oklch.h < 145) {
-        color.oklch.h = 155;
-      }
-      if (this.seedColor.oklch.h >= 145) {
-        color.oklch.h = 135;
-      }
-    }
-
-    return color;
-  }
-
   /*
    * Foreground colors
    */
diff --git a/app/client/packages/design-system/theming/src/color/LightModeTheme.ts b/app/client/packages/design-system/theming/src/color/LightModeTheme.ts
index 03e28a5670..bb6cb601ec 100644
--- a/app/client/packages/design-system/theming/src/color/LightModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/color/LightModeTheme.ts
@@ -52,10 +52,10 @@ export class LightModeTheme implements ColorModeTheme {
       bgAccentSubtleActive: this.bgAccentSubtleActive.toString(),
       bgAssistive: this.bgAssistive.toString(),
       bgPositive: this.bgPositive.to("sRGB").toString(),
-      bgPositiveHover: this.bgPositiveHover.toString(),
-      bgPositiveActive: this.bgPositiveActive.toString(),
-      bgPositiveSubtleHover: this.bgPositiveSubtleHover.toString(),
-      bgPositiveSubtleActive: this.bgPositiveSubtleActive.toString(),
+      bgPositiveHover: this.bgPositiveHover.to("sRGB").toString(),
+      bgPositiveActive: this.bgPositiveActive.to("sRGB").toString(),
+      bgPositiveSubtleHover: this.bgPositiveSubtleHover.to("sRGB").toString(),
+      bgPositiveSubtleActive: this.bgPositiveSubtleActive.to("sRGB").toString(),
       bgNegative: this.bgNegative.to("sRGB").toString(),
       bgNegativeHover: this.bgNegativeHover.toString(),
       bgNegativeActive: this.bgNegativeActive.toString(),
@@ -291,23 +291,46 @@ export class LightModeTheme implements ColorModeTheme {
   }
 
   private get bgPositiveHover() {
-    return "#3ec16c";
+    const color = this.bgPositive.clone();
+
+    // Lightness of bgPositive is known, no additional checks like in bgAccentHover
+    color.oklch.l = color.oklch.l + 0.05;
+
+    return color;
   }
 
   private get bgPositiveActive() {
-    return "#35a15c";
+    const color = this.bgPositive.clone();
+
+    // Lightness of bgPositive is known, no additional checks like in bgAccentActive
+    color.oklch.l = color.oklch.l - 0.02;
+
+    return color;
   }
 
   private get bgPositiveSubtle() {
-    return "#f0fff5";
+    const color = this.bgPositive.clone();
+
+    color.oklch.l = 0.94;
+    color.oklch.c = 0.09;
+
+    return color;
   }
 
   private get bgPositiveSubtleHover() {
-    return "#e0ffeb";
+    const color = this.bgPositiveSubtle.clone();
+
+    color.oklch.l = color.oklch.l + 0.02;
+
+    return color;
   }
 
   private get bgPositiveSubtleActive() {
-    return "#d1ffe1";
+    const color = this.bgPositiveSubtle.clone();
+
+    color.oklch.l = color.oklch.l - 0.01;
+
+    return color;
   }
 
   // Warning background, yellow