diff --git a/packages/mui-material/src/Typography/Typography.test.js b/packages/mui-material/src/Typography/Typography.test.js
index e6877e3339bb57..0144dbd0f2b9f4 100644
--- a/packages/mui-material/src/Typography/Typography.test.js
+++ b/packages/mui-material/src/Typography/Typography.test.js
@@ -122,4 +122,13 @@ describe('<Typography />', () => {
       marginBottom: '16px',
     });
   });
+
+  it('should check for invalid color value', () => {
+    const { container, debug } = render(
+      <Typography variant="h6" color="background">
+        Hello
+      </Typography>,
+    );
+    debug(container);
+  });
 });
diff --git a/packages/mui-system/src/style.js b/packages/mui-system/src/style.js
index 2767e7e306623a..144b59ae4dfe1d 100644
--- a/packages/mui-system/src/style.js
+++ b/packages/mui-system/src/style.js
@@ -39,6 +39,14 @@ export function getStyleValue(themeMapping, transform, propValueFinal, userValue
     value = transform(value, userValue, themeMapping);
   }
 
+  if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean') {
+    // Log an error in development mode
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(`Invalid value "${value}" for property "${userValue}"`);
+    }
+    value = userValue;
+  }
+
   return value;
 }