diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
index f9dc753b14b0..eede4b894bc5 100644
--- a/src/util/withAlphaVariable.js
+++ b/src/util/withAlphaVariable.js
@@ -37,23 +37,20 @@ export default function withAlphaVariable({ color, property, variable }) {
   }
 
   if (isValidColor(color)) {
-    const { alpha = 1, mode } = culori.parse(color)
+    const parsed = culori.parse(color)
 
-    if (alpha !== 1) {
+    if ('alpha' in parsed) {
       // Has an alpha value, return color as-is
       return {
         [property]: color,
       }
     }
 
-    let value
-    if (mode === 'hsl') {
-      const { h, s, l } = culori.hsl(color)
-      value = `hsla(${h}, ${s}, ${l}, var(${variable}))`
-    } else {
-      const { r, g, b } = culori.rgb(color)
-      value = `rgba(${r}, ${g}, ${b}, var(${variable}))`
-    }
+    const formatFn = parsed.mode === 'hsl' ? 'formatHsl' : 'formatRgb'
+    const value = culori[formatFn]({
+      ...parsed,
+      alpha: 0.3,
+    }).replace('0.3)', `var(${variable}))`)
 
     return {
       [variable]: '1',
diff --git a/tests/withAlphaVariable.test.js b/tests/withAlphaVariable.test.js
index ebd86a5b8d28..34ae4487ae05 100644
--- a/tests/withAlphaVariable.test.js
+++ b/tests/withAlphaVariable.test.js
@@ -7,6 +7,16 @@ test('it adds the right custom property', () => {
     '--tw-text-opacity': '1',
     color: 'rgba(255, 0, 0, var(--tw-text-opacity))',
   })
+  expect(
+    withAlphaVariable({
+      color: 'hsl(240 100% 50%)',
+      property: 'color',
+      variable: '--tw-text-opacity',
+    })
+  ).toEqual({
+    '--tw-text-opacity': '1',
+    color: 'hsla(240, 100%, 50%, var(--tw-text-opacity))',
+  })
 })
 
 test('it ignores colors that cannot be parsed', () => {