diff --git a/__tests__/withAlphaVariable.test.js b/__tests__/withAlphaVariable.test.js
index ff5d3a5291d6..11fc3a12d9ce 100644
--- a/__tests__/withAlphaVariable.test.js
+++ b/__tests__/withAlphaVariable.test.js
@@ -95,3 +95,15 @@ test('it ignores colors that already have an alpha channel', () => {
     'background-color': 'hsla(240, 100%, 50%, 0.5)',
   })
 })
+
+test('it allows a closure to be passed', () => {
+  expect(
+    withAlphaVariable({
+      color: ({ opacityVariable }) => `rgba(0, 0, 0, var(${opacityVariable}))`,
+      property: 'background-color',
+      variable: '--bg-opacity',
+    })
+  ).toEqual({
+    'background-color': 'rgba(0, 0, 0, var(--bg-opacity))',
+  })
+})
diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
index 7083809b2ce4..089301baaa31 100644
--- a/src/util/withAlphaVariable.js
+++ b/src/util/withAlphaVariable.js
@@ -1,4 +1,5 @@
 import createColor from 'color'
+import _ from 'lodash'
 
 function hasAlpha(color) {
   return (
@@ -18,6 +19,12 @@ function toRgba(color) {
 }
 
 export default function withAlphaVariable({ color, property, variable }) {
+  if (_.isFunction(color)) {
+    return {
+      [property]: color({ opacityVariable: variable }),
+    }
+  }
+
   try {
     const [r, g, b, a] = toRgba(color)