diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
index 34c594474312b5..8443f3d6c9bdf0 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
@@ -91,7 +91,7 @@ export default function ColorInversionHeader() {
                 sx={{
                   ml: 'auto',
                   bgcolor: (theme) =>
-                    `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
+                    `rgba(${theme.vars.palette[color].mainChannel} / 0.4)`,
                 }}
               >
                 Beta
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
index 5e26d914332632..ee82dc0764bf1e 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
@@ -96,7 +96,7 @@ export default function ColorInversionHeader() {
                 sx={{
                   ml: 'auto',
                   bgcolor: (theme) =>
-                    `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
+                    `rgba(${theme.vars.palette[color].mainChannel} / 0.4)`,
                 }}
               >
                 Beta