diff --git a/docs/embedding/sdk/appearance.md b/docs/embedding/sdk/appearance.md
index ff0069412c9e640d53982b2c4b5af5eca4f23533..fcb2f3add3368fb256dd211d7779b8d4af245c5f 100644
--- a/docs/embedding/sdk/appearance.md
+++ b/docs/embedding/sdk/appearance.md
@@ -49,6 +49,9 @@ const theme = defineEmbeddingSdkTheme({
     // Slightly darker background color used for hover and accented elements
     "background-hover": "#F9FBFC",
 
+    // Muted background color used for disabled elements, such as disabled buttons and inputs.
+    "background-disabled": "#F3F5F7",
+
     // Color used for borders
     border: "#EEECEC",
 
diff --git a/enterprise/frontend/src/embedding-sdk/lib/theme/embedding-color-palette.ts b/enterprise/frontend/src/embedding-sdk/lib/theme/embedding-color-palette.ts
index ed382d86a0d465c521e6ae733186840f8030e143..266d26cc1c757da1ce5810e135ea1cdf3c9c8e46 100644
--- a/enterprise/frontend/src/embedding-sdk/lib/theme/embedding-color-palette.ts
+++ b/enterprise/frontend/src/embedding-sdk/lib/theme/embedding-color-palette.ts
@@ -43,16 +43,10 @@ export const SDK_TO_MAIN_APP_COLORS_MAPPING: Record<
   "text-tertiary": ["text-light", "text-tertiary"],
   background: ["bg-white", "background"],
   "background-hover": ["bg-light"],
+  "background-disabled": ["background-disabled"],
   shadow: ["shadow"],
   positive: ["success"],
   negative: ["danger"],
-
-  // positive: "success",
-  // negative: "danger",
-  // warning: "warning",
-
-  // white
-  // black
 };
 
 const originalColors = { ...colors };
diff --git a/enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.unit.spec.ts b/enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.unit.spec.ts
index 99dd736179841a9343f2d169127e0aeeb0d42be6..68c43084d2df23f14d751be6bd5d0a7297e4d64e 100644
--- a/enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.unit.spec.ts
+++ b/enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.unit.spec.ts
@@ -16,6 +16,7 @@ describe("Transform Embedding Theme Override", () => {
           brand: "hotpink",
           "text-primary": "yellow",
           "text-tertiary": "green",
+          "background-disabled": "pink",
         },
       },
       "Roboto",
@@ -30,6 +31,7 @@ describe("Transform Embedding Theme Override", () => {
         "text-primary": expect.arrayContaining(["yellow"]),
         "text-light": expect.arrayContaining(["green"]),
         "text-tertiary": expect.arrayContaining(["green"]),
+        "background-disabled": expect.arrayContaining(["pink"]),
       },
       other: {
         fontSize: "2rem",
diff --git a/enterprise/frontend/src/embedding-sdk/types/theme/index.ts b/enterprise/frontend/src/embedding-sdk/types/theme/index.ts
index 26e84d4435743b5e5f77a88d9666d74258b49e97..a8eb4ac95387f5814d4d65910873ff387c82b43d 100644
--- a/enterprise/frontend/src/embedding-sdk/types/theme/index.ts
+++ b/enterprise/frontend/src/embedding-sdk/types/theme/index.ts
@@ -51,6 +51,9 @@ export interface MetabaseColors {
   /** Slightly darker background color used for hover and accented elements. */
   "background-hover"?: string;
 
+  /** Muted background color used for disabled elements, such as disabled buttons and inputs. */
+  "background-disabled"?: string;
+
   /** Color used for borders */
   border?: string;