diff --git a/app/client/packages/design-system/theming/src/color/DarkModeTheme.test.ts b/app/client/packages/design-system/theming/src/color/DarkModeTheme.test.ts
index f928c2e8b0..e068448bfa 100644
--- a/app/client/packages/design-system/theming/src/color/DarkModeTheme.test.ts
+++ b/app/client/packages/design-system/theming/src/color/DarkModeTheme.test.ts
@@ -2,14 +2,64 @@ import { DarkModeTheme } from "./DarkModeTheme";
 
 describe("@design-system/theming/color/DarkModeTheme", () => {
   it("checks bg color", () => {
-    const { bg: aChromaticSeedBg } = new DarkModeTheme(
-      "oklch(0.92 0.02 110)",
-    ).getColors();
-    expect(aChromaticSeedBg).toBe("rgb(4.3484% 4.3484% 4.3484%)");
+    // chroma < 0.04
+    const { bg: bg1 } = new DarkModeTheme("oklch(0.92 0.02 110)").getColors();
+    expect(bg1).toBe("rgb(4.3484% 4.3484% 4.3484%)");
 
-    const { bg: notAChromaticSeedBg } = new DarkModeTheme(
-      "oklch(0.92 0.05 110)",
+    // chroma > 0.04
+    const { bg: bg2 } = new DarkModeTheme("oklch(0.92 0.05 110)").getColors();
+    expect(bg2).toBe("rgb(5.3377% 4.7804% 0%)");
+  });
+
+  it("checks bgAccent color", () => {
+    // lightness < 0.3
+    const { bgAccent: bgAccent1 } = new DarkModeTheme(
+      "oklch(0.2 0.09 231)",
     ).getColors();
-    expect(notAChromaticSeedBg).toBe("rgb(5.3377% 4.7804% 0%)");
+    expect(bgAccent1).toBe("rgb(0% 19.987% 30.122%)");
+  });
+
+  it("checks bgAccentHover color", () => {
+    // lightness < 0.3
+    const { bgAccentHover: bgAccentHover1 } = new DarkModeTheme(
+      "oklch(0.2 0.09 231)",
+    ).getColors();
+    expect(bgAccentHover1).toBe("rgb(0% 25.498% 37.079%)");
+
+    // lightness > 0.3 && lightness < 0.45
+    const { bgAccent: bgAccentHover2 } = new DarkModeTheme(
+      "oklch(0.35 0.09 231)",
+    ).getColors();
+    expect(bgAccentHover2).toBe("rgb(0% 25.498% 37.079%)");
+
+    // lightness > 0.45 && lightness < 0.77
+    const { bgAccentHover: bgAccentHover3 } = new DarkModeTheme(
+      "oklch(0.50 0.09 231)",
+    ).getColors();
+    expect(bgAccentHover3).toBe("rgb(15.696% 45.773% 58.926%)");
+
+    // lightness > 0.77 && lightness < 0.85 && hue > 120 or hue < 300 && chroma > 0.04
+    const { bgAccentHover: bgAccentHover4 } = new DarkModeTheme(
+      "oklch(0.80 0.09 150)",
+    ).getColors();
+    expect(bgAccentHover4).toBe("rgb(51.184% 89.442% 60.062%)");
+
+    // l lightness > 0.77 && lightness < 0.85 && hue < 120 or hue > 300 && chroma > 0.04
+    const { bgAccentHover: bgAccentHover5 } = new DarkModeTheme(
+      "oklch(0.80 0.09 110)",
+    ).getColors();
+    expect(bgAccentHover5).toBe("rgb(85.364% 85.594% 0%)");
+
+    // lightness > 0.77 && lightness < 0.85 0 && chroma < 0.04
+    const { bgAccentHover: bgAccentHover6 } = new DarkModeTheme(
+      "oklch(0.80 0.03 110)",
+    ).getColors();
+    expect(bgAccentHover6).toBe("rgb(79.687% 80.239% 71.58%)");
+
+    // lightness > 0.85
+    const { bgAccentHover: bgAccentHover7 } = new DarkModeTheme(
+      "oklch(0.90 0.03 110)",
+    ).getColors();
+    expect(bgAccentHover7).toBe("rgb(78.426% 78.975% 70.34%)");
   });
 });
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 d840c1ba7d..8d76235937 100644
--- a/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts
@@ -44,8 +44,8 @@ export class DarkModeTheme implements ColorModeTheme {
   public getColors = () => {
     return {
       bg: this.bg.to("sRGB").toString(),
-      bgAccent: this.bgAccent.toString(),
-      bgAccentHover: this.bgAccentHover.toString(),
+      bgAccent: this.bgAccent.to("sRGB").toString(),
+      bgAccentHover: this.bgAccentHover.to("sRGB").toString(),
       bgAccentActive: this.bgAccentActive.toString(),
       bgAccentSubtleHover: this.bgAccentSubtleHover.toString(),
       bgAccentSubtleActive: this.bgAccentSubtleActive.toString(),
diff --git a/app/client/packages/design-system/theming/src/color/LightModeTheme.test.ts b/app/client/packages/design-system/theming/src/color/LightModeTheme.test.ts
index 60ee43fd9c..f4ec50d59a 100644
--- a/app/client/packages/design-system/theming/src/color/LightModeTheme.test.ts
+++ b/app/client/packages/design-system/theming/src/color/LightModeTheme.test.ts
@@ -2,29 +2,88 @@ import { LightModeTheme } from "./LightModeTheme";
 
 describe("@design-system/theming/color/LightModeTheme", () => {
   it("checks bg color", () => {
-    const { bg: veryLightSeedBg } = new LightModeTheme(
+    // lightness > 0.93
+    const { bg: bg1 } = new LightModeTheme("oklch(0.95 0.09 231)").getColors();
+    expect(bg1).toBe("rgb(84.831% 87.516% 88.974%)");
+
+    // lightness < 0.93
+    const { bg: bg2 } = new LightModeTheme("oklch(0.92 0.09 231)").getColors();
+    expect(bg2).toBe("rgb(95.828% 98.573% 100%)");
+
+    // hue > 120 && hue < 300
+    const { bg: bg3 } = new LightModeTheme("oklch(0.95 0.07 231)").getColors();
+    expect(bg3).toBe("rgb(84.831% 87.516% 88.974%)");
+
+    // hue < 120 or hue > 300
+    const { bg: bg4 } = new LightModeTheme("oklch(0.92 0.07 110)").getColors();
+    expect(bg4).toBe("rgb(98.101% 98.258% 96.176%)");
+
+    // chroma < 0.04
+    const { bg: bg5 } = new LightModeTheme("oklch(0.92 0.02 110)").getColors();
+    expect(bg5).toBe("rgb(98.026% 98.026% 98.026%)");
+  });
+
+  it("checks bgAccent color", () => {
+    // lightness > 0.93
+    const { bgAccent: bgAccent1 } = new LightModeTheme(
       "oklch(0.95 0.09 231)",
     ).getColors();
-    expect(veryLightSeedBg).toBe("rgb(84.831% 87.516% 88.974%)");
+    expect(bgAccent1).toBe("rgb(91.762% 98.141% 100%)");
+  });
 
-    const { bg: notVerylightSeedBg } = new LightModeTheme(
-      "oklch(0.92 0.09 231)",
+  it("checks bgAccentHover color", () => {
+    // lightness < 0.06
+    const { bgAccentHover: bgAccentHover1 } = new LightModeTheme(
+      "oklch(0.05 0.09 231)",
     ).getColors();
-    expect(notVerylightSeedBg).toBe("rgb(95.828% 98.573% 100%)");
+    expect(bgAccentHover1).toBe("rgb(0% 23.271% 34.263%)");
 
-    const { bg: coldSeedBg } = new LightModeTheme(
-      "oklch(0.95 0.07 231)",
+    // lightness > 0.06 && lightness < 0.14
+    const { bgAccent: bgAccentHover2 } = new LightModeTheme(
+      "oklch(0.08 0.09 231)",
     ).getColors();
-    expect(coldSeedBg).toBe("rgb(84.831% 87.516% 88.974%)");
+    expect(bgAccentHover2).toBe("rgb(0% 0% 9.1079%)");
 
-    const { bg: notColdSeedBg } = new LightModeTheme(
-      "oklch(0.92 0.07 110)",
+    // lightness > 0.14 && lightness < 0.21 && hue > 120 && hue < 300
+    const { bgAccentHover: bgAccentHover3 } = new LightModeTheme(
+      "oklch(0.17 0.09 231)",
     ).getColors();
-    expect(notColdSeedBg).toBe("rgb(98.101% 98.258% 96.176%)");
+    expect(bgAccentHover3).toBe("rgb(0% 16.773% 26.103%)");
 
-    const { bg: aChromaticSeedBg } = new LightModeTheme(
-      "oklch(0.92 0.02 110)",
+    // lightness > 0.14 && lightness < 0.21 && hue < 120 or hue > 300
+    const { bgAccentHover: bgAccentHover4 } = new LightModeTheme(
+      "oklch(0.17 0.09 110)",
     ).getColors();
-    expect(aChromaticSeedBg).toBe("rgb(98.026% 98.026% 98.026%)");
+    expect(bgAccentHover4).toBe("rgb(19.339% 18.943% 0%)");
+
+    // lightness > 0.21 && lightness < 0.4
+    const { bgAccentHover: bgAccentHover5 } = new LightModeTheme(
+      "oklch(0.3 0.09 110)",
+    ).getColors();
+    expect(bgAccentHover5).toBe("rgb(28.395% 28.425% 0%)");
+
+    // lightness > 0.4 && lightness < 0.7
+    const { bgAccentHover: bgAccentHover6 } = new LightModeTheme(
+      "oklch(0.5 0.09 110)",
+    ).getColors();
+    expect(bgAccentHover6).toBe("rgb(45.795% 46.287% 19.839%)");
+
+    // lightness > 0.7
+    const { bgAccentHover: bgAccentHover7 } = new LightModeTheme(
+      "oklch(0.9 0.09 110)",
+    ).getColors();
+    expect(bgAccentHover7).toBe("rgb(92.14% 93.271% 65.642%)");
+
+    // lightness > 0.93 && hue > 60 && hue < 115
+    const { bgAccentHover: bgAccentHover8 } = new LightModeTheme(
+      "oklch(0.95 0.09 70)",
+    ).getColors();
+    expect(bgAccentHover8).toBe("rgb(100% 90.701% 78.457%)");
+
+    // lightness > 0.93 && hue > 116 or hue < 165
+    const { bgAccentHover: bgAccentHover9 } = new LightModeTheme(
+      "oklch(0.95 0.09 120)",
+    ).getColors();
+    expect(bgAccentHover9).toBe("rgb(89.886% 97.8% 66.657%)");
   });
 });
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 da90c3c7f2..f3b4e0c9e2 100644
--- a/app/client/packages/design-system/theming/src/color/LightModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/color/LightModeTheme.ts
@@ -44,8 +44,8 @@ export class LightModeTheme implements ColorModeTheme {
   public getColors = () => {
     return {
       bg: this.bg.to("sRGB").toString(),
-      bgAccent: this.bgAccent.toString(),
-      bgAccentHover: this.bgAccentHover.toString(),
+      bgAccent: this.bgAccent.to("sRGB").toString(),
+      bgAccentHover: this.bgAccentHover.to("sRGB").toString(),
       bgAccentActive: this.bgAccentActive.toString(),
       bgAccentSubtleHover: this.bgAccentSubtleHover.toString(),
       bgAccentSubtleActive: this.bgAccentSubtleActive.toString(),