diff --git a/.storybook/preview.js b/.storybook/preview.js
index 5e06ee9f736..a5b0b1e3e84 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -14,6 +14,16 @@ const DARK_THEME = { ...DEFAULT_THEME, colors: { ...DEFAULT_THEME.colors, base:
 const DARK = getColor({ theme: DARK_THEME, variable: 'background.default' });
 const LIGHT = getColor({ theme: DEFAULT_THEME, variable: 'background.default' });
 
+export const args = {
+  'colors.dark': DEFAULT_THEME.colors.variables.dark,
+  'colors.light': DEFAULT_THEME.colors.variables.light
+};
+
+export const argTypes = {
+  'colors.dark': { table: { category: 'Variables' } },
+  'colors.light': { table: { category: 'Variables' } }
+};
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   backgrounds: {
@@ -57,7 +67,15 @@ const withThemeProvider = (story, context) => {
     document.querySelector('link[href$="bedrock/dist/index.css"]').setAttribute('disabled', true);
   }
 
-  const colors = { ...DEFAULT_THEME.colors, primaryHue: context.globals.primaryHue };
+  const colors = {
+    ...DEFAULT_THEME.colors,
+    primaryHue: context.globals.primaryHue,
+    variables: {
+      ...DEFAULT_THEME.colors.variables,
+      dark: context.args['colors.dark'],
+      light: context.args['colors.light']
+    }
+  };
 
   if (
     context.globals.backgrounds && context.globals.backgrounds.value !== 'transparent'
diff --git a/packages/theming/demo/utilities.stories.mdx b/packages/theming/demo/utilities.stories.mdx
index 18dba9835e3..75d41898fdc 100644
--- a/packages/theming/demo/utilities.stories.mdx
+++ b/packages/theming/demo/utilities.stories.mdx
@@ -64,21 +64,25 @@ import README from '../README.md';
   <Story
     name="getColor()"
     args={{
-      hue: 'primaryHue',
       theme: {
         colors: Object.fromEntries(
           Object.entries(DEFAULT_THEME.colors).filter(([key]) => key !== 'base')
         ),
+        opacity: DEFAULT_THEME.opacity,
         palette: DEFAULT_THEME.palette
-      }
+      },
+      variable: 'background.primaryEmphasis'
     }}
     argTypes={{
       dark: { control: { type: 'object' } },
+      hue: { control: { type: 'text' } },
       light: { control: { type: 'object' } },
       offset: { control: { type: 'number' } },
       shade: { control: { type: 'number' } },
-      transparency: { control: { type: 'range', min: 100, max: 1200, step: 100 } },
-      variable: { control: { type: 'text' } }
+      transparency: { control: { type: 'number', min: 100, max: 1200, step: 100 } },
+      variable: { control: { type: 'text' } },
+      'colors.dark': { control: false, table: { disable: true } },
+      'colors.light': { control: false, table: { disable: true } }
     }}
   >
     {args => <GetColorStory {...args} />}
diff --git a/packages/theming/src/utils/getColor.ts b/packages/theming/src/utils/getColor.ts
index a776fd0a226..c5224b2f969 100644
--- a/packages/theming/src/utils/getColor.ts
+++ b/packages/theming/src/utils/getColor.ts
@@ -214,6 +214,7 @@ export const getColor = memoize(
       shade,
       colors: theme.colors,
       palette: theme.palette,
+      opacity: theme.opacity,
       transparency,
       variable
     })