diff --git a/__tests__/flattenColorPalette.test.js b/__tests__/flattenColorPalette.test.js
index 456488a6d5f8..384c2f672122 100644
--- a/__tests__/flattenColorPalette.test.js
+++ b/__tests__/flattenColorPalette.test.js
@@ -43,3 +43,35 @@ test('it flattens nested color objects', () => {
     'blue-3': 'rgb(0,0,100)',
   })
 })
+
+test('it flattens deeply nested color objects', () => {
+  expect(
+    flattenColorPalette({
+      primary: 'purple',
+      secondary: {
+        DEFAULT: 'blue',
+        hover: 'cyan',
+        focus: 'red',
+      },
+      button: {
+        primary: {
+          DEFAULT: 'magenta',
+          hover: 'green',
+          focus: {
+            DEFAULT: 'yellow',
+            variant: 'orange',
+          },
+        },
+      },
+    })
+  ).toEqual({
+    primary: 'purple',
+    secondary: 'blue',
+    'secondary-hover': 'cyan',
+    'secondary-focus': 'red',
+    'button-primary': 'magenta',
+    'button-primary-hover': 'green',
+    'button-primary-focus': 'yellow',
+    'button-primary-focus-variant': 'orange',
+  })
+})
diff --git a/src/util/flattenColorPalette.js b/src/util/flattenColorPalette.js
index f40d09ec4f9c..1a94e1802aac 100644
--- a/src/util/flattenColorPalette.js
+++ b/src/util/flattenColorPalette.js
@@ -7,7 +7,7 @@ export default function flattenColorPalette(colors) {
         return [[name, color]]
       }
 
-      return _.map(color, (value, key) => {
+      return _.map(flattenColorPalette(color), (value, key) => {
         const suffix = key === 'DEFAULT' ? '' : `-${key}`
         return [`${name}${suffix}`, value]
       })