diff --git a/website/docs/foundations/colors/index.js b/website/docs/foundations/colors/index.js
index 47d9ab0d008..9dd6c10458e 100644
--- a/website/docs/foundations/colors/index.js
+++ b/website/docs/foundations/colors/index.js
@@ -36,7 +36,7 @@ export default class Colors extends Component {
               colors['semantic'][context] = [];
             }
             const tokenObj = {
-              colorName: `${token.path[1]}-${token.path[2]}`,
+              colorName: token.path.slice(1).join('-'),
               cssVariable: `--${token.name}`,
               // note: we prefix `value` with `$` because we're using the DTCG format
               value: token.$value,
@@ -52,7 +52,7 @@ export default class Colors extends Component {
               colors['branding'][brand] = [];
             }
             colors['branding'][brand].push({
-              colorName: `${token.path[1]}-${token.path[2]}`,
+              colorName: token.path.slice(1).join('-'),
               cssVariable: `--${token.name}`,
               // note: we prefix `value` with `$` because we're using the DTCG format
               value: token.$value,