diff --git a/src/components/Chip/helpers.tsx b/src/components/Chip/helpers.tsx
index 6090ed45bb..29fa6d8b40 100644
--- a/src/components/Chip/helpers.tsx
+++ b/src/components/Chip/helpers.tsx
@@ -82,7 +82,7 @@ const getDefaultBackgroundColor = ({
     return colors.surface;
   }
 
-  return colors.secondaryContainer;
+  return 'transparent';
 };
 
 const getBackgroundColor = ({
@@ -93,11 +93,11 @@ const getBackgroundColor = ({
 }: BaseProps & {
   customBackgroundColor?: ColorValue;
 }) => {
-  const { colors } = md3(theme);
-  if (typeof customBackgroundColor === 'string') {
+  if (customBackgroundColor !== undefined) {
     return customBackgroundColor;
   }
 
+  const { colors } = md3(theme);
   if (disabled) {
     if (isOutlined) {
       return 'transparent';
@@ -116,12 +116,23 @@ const getSelectedBackgroundColor = ({
 }: BaseProps & {
   customBackgroundColor?: ColorValue;
 }) => {
-  return getBackgroundColor({
-    theme,
-    disabled,
-    isOutlined,
-    customBackgroundColor,
-  });
+  if (customBackgroundColor !== undefined) {
+    return customBackgroundColor;
+  }
+
+  const { colors } = md3(theme);
+  if (disabled) {
+    if (isOutlined) {
+      return 'transparent';
+    }
+    return colors.surfaceContainerLow;
+  }
+
+  if (isOutlined) {
+    return colors.surface;
+  }
+
+  return colors.secondaryContainer;
 };
 
 const getIconColor = ({
diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx
index cf0f89ddba..d6a5086faf 100644
--- a/src/components/__tests__/Chip.test.tsx
+++ b/src/components/__tests__/Chip.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated } from 'react-native';
+import { Animated, PlatformColor } from 'react-native';
 
 import { act } from '@testing-library/react-native';
 import color from 'color';
@@ -217,6 +217,20 @@ describe('getChipColor - selected background color', () => {
     });
   });
 
+  it('should return non-string custom color (e.g. PlatformColor / OpaqueColorValue), flat mode', () => {
+    const opaque = PlatformColor('systemBlue');
+    expect(
+      getChipColors({
+        theme: getTheme(),
+        customBackgroundColor: opaque,
+        isOutlined: false,
+      })
+    ).toMatchObject({
+      backgroundColor: opaque,
+      selectedBackgroundColor: opaque,
+    });
+  });
+
   it('should return theme color, for theme version 3, flat mode', () => {
     expect(
       getChipColors({
@@ -227,6 +241,41 @@ describe('getChipColor - selected background color', () => {
       selectedBackgroundColor: getTheme().colors.secondaryContainer,
     });
   });
+
+  it('should return surface color, for theme version 3, outlined mode', () => {
+    expect(
+      getChipColors({
+        theme: getTheme(),
+        isOutlined: true,
+      })
+    ).toMatchObject({
+      selectedBackgroundColor: getTheme().colors.surface,
+    });
+  });
+
+  it('should return disabled fill, for theme version 3, flat mode + disabled', () => {
+    expect(
+      getChipColors({
+        theme: getTheme(),
+        isOutlined: false,
+        disabled: true,
+      })
+    ).toMatchObject({
+      selectedBackgroundColor: getTheme().colors.surfaceContainerLow,
+    });
+  });
+
+  it('should return transparent for theme version 3, outlined mode + disabled', () => {
+    expect(
+      getChipColors({
+        theme: getTheme(),
+        isOutlined: true,
+        disabled: true,
+      })
+    ).toMatchObject({
+      selectedBackgroundColor: 'transparent',
+    });
+  });
 });
 
 describe('getChipColor - background color', () => {
@@ -260,8 +309,16 @@ describe('getChipColor - background color', () => {
         isOutlined: false,
       })
     ).toMatchObject({
-      backgroundColor: getTheme().colors.secondaryContainer,
+      backgroundColor: 'transparent',
+    });
+  });
+
+  it('should differ from selectedBackgroundColor for theme version 3, flat mode', () => {
+    const { backgroundColor, selectedBackgroundColor } = getChipColors({
+      theme: getTheme(),
+      isOutlined: false,
     });
+    expect(backgroundColor).not.toBe(selectedBackgroundColor);
   });
 });
 
diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
index 736f79b6fe..9726bb5968 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`renders chip with close button 1`] = `
   collapsable={false}
   style={
     {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
+      "backgroundColor": "transparent",
       "borderRadius": 8,
       "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
@@ -22,7 +22,7 @@ exports[`renders chip with close button 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
+        "backgroundColor": "transparent",
         "borderColor": "transparent",
         "borderRadius": 8,
         "borderStyle": "solid",
@@ -303,7 +303,7 @@ exports[`renders chip with custom close button 1`] = `
   collapsable={false}
   style={
     {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
+      "backgroundColor": "transparent",
       "borderRadius": 8,
       "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
@@ -320,7 +320,7 @@ exports[`renders chip with custom close button 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
+        "backgroundColor": "transparent",
         "borderColor": "transparent",
         "borderRadius": 8,
         "borderStyle": "solid",
@@ -601,7 +601,7 @@ exports[`renders chip with icon 1`] = `
   collapsable={false}
   style={
     {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
+      "backgroundColor": "transparent",
       "borderRadius": 8,
       "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
@@ -618,7 +618,7 @@ exports[`renders chip with icon 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
+        "backgroundColor": "transparent",
         "borderColor": "transparent",
         "borderRadius": 8,
         "borderStyle": "solid",
@@ -806,7 +806,7 @@ exports[`renders chip with onPress 1`] = `
   collapsable={false}
   style={
     {
-      "backgroundColor": "rgba(232, 222, 248, 1)",
+      "backgroundColor": "transparent",
       "borderRadius": 8,
       "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
@@ -823,7 +823,7 @@ exports[`renders chip with onPress 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(232, 222, 248, 1)",
+        "backgroundColor": "transparent",
         "borderColor": "transparent",
         "borderRadius": 8,
         "borderStyle": "solid",
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
index f0dae5994d..e5b46866a3 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -121,7 +121,7 @@ exports[`renders list item with custom description 1`] = `
             collapsable={false}
             style={
               {
-                "backgroundColor": "rgba(232, 222, 248, 1)",
+                "backgroundColor": "transparent",
                 "borderRadius": 8,
                 "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
@@ -138,7 +138,7 @@ exports[`renders list item with custom description 1`] = `
               collapsable={false}
               style={
                 {
-                  "backgroundColor": "rgba(232, 222, 248, 1)",
+                  "backgroundColor": "transparent",
                   "borderColor": "transparent",
                   "borderRadius": 8,
                   "borderStyle": "solid",