diff --git a/packages/mui-codemod/src/v6.0.0/system-props/removeSystemProps.js b/packages/mui-codemod/src/v6.0.0/system-props/removeSystemProps.js
index 7169f450e9d207..7109c398fc5faf 100644
--- a/packages/mui-codemod/src/v6.0.0/system-props/removeSystemProps.js
+++ b/packages/mui-codemod/src/v6.0.0/system-props/removeSystemProps.js
@@ -149,7 +149,9 @@ export default function removeSystemProps(file, api, options) {
       matcher: (key, val) =>
         key !== 'color' ||
         (val.value?.includes('.') && val.value !== 'inherit') ||
-        val.value === 'divider',
+        val.value === 'divider' ||
+        val.value.startsWith('#') ||
+        val.value.match(/\(.*\)/),
     },
     Link: {
       matcher: (key) => key !== 'color',
@@ -162,8 +164,12 @@ export default function removeSystemProps(file, api, options) {
     .forEach((decl) => {
       decl.node.specifiers.forEach((spec) => {
         if (spec.type === 'ImportSpecifier') {
-          if (components.includes(spec.imported.name)) {
+          const name = spec.imported.name;
+          if (components.includes(name)) {
             deprecatedElements.push(spec.local.name);
+            if (customReplacement[name]) {
+              elementReplacement[spec.local.name] = customReplacement[name];
+            }
           }
         }
         if (spec.type === 'ImportDefaultSpecifier') {
diff --git a/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.actual.js b/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.actual.js
index 87c7b11fe142fd..d24116ece472ba 100644
--- a/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.actual.js
+++ b/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.actual.js
@@ -1,4 +1,5 @@
 import { Box as Boxxx, Grid as Griddd, Grid2 as Griddd2 } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import Typographyyy from '@mui/material/Typography';
 import Stackkk from '@mui/material/Stack';
 
@@ -10,6 +11,8 @@ import Stackkk from '@mui/material/Stack';
 
 const sx = { display: 'flex' };
 const ml = 2;
+<Typography color="#fff" mb={5} />;
+<Typography color="hsl(200 30% 30%)" mb={5} />;
 <Typographyyy variant="body1" color="primary.main" ml={ml} sx={sx} />;
 <Typographyyy variant="body1" color="divider" ml={ml} sx={sx} />;
 <Typographyyy variant="body1" color="inherit" ml={ml} sx={sx} />;
diff --git a/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.expected.js b/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.expected.js
index cdbc730fcc0e65..d445194b8fcf36 100644
--- a/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.expected.js
+++ b/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.expected.js
@@ -1,4 +1,5 @@
 import { Box as Boxxx, Grid as Griddd, Grid2 as Griddd2 } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import Typographyyy from '@mui/material/Typography';
 import Stackkk from '@mui/material/Stack';
 
@@ -20,6 +21,16 @@ import Stackkk from '@mui/material/Stack';
 
 const sx = { display: 'flex' };
 const ml = 2;
+<Typography
+  sx={{
+    color: "#fff",
+    mb: 5
+  }} />;
+<Typography
+  sx={{
+    color: "hsl(200 30% 30%)",
+    mb: 5
+  }} />;
 <Typographyyy
   variant="body1"
   sx={[{