diff --git a/packages/preset-mini/src/utils/colors.ts b/packages/preset-mini/src/utils/colors.ts
index b63d624b37..1fa9baf289 100644
--- a/packages/preset-mini/src/utils/colors.ts
+++ b/packages/preset-mini/src/utils/colors.ts
@@ -1,8 +1,11 @@
 import type { CSSColorValue, RGBAColorValue } from '@unocss/core'
+import { escapeRegExp } from '@unocss/core'
 
 /* eslint-disable no-case-declarations */
 
 const cssColorFunctions = ['hsl', 'hsla', 'hwb', 'lab', 'lch', 'oklab', 'oklch', 'rgb', 'rgba']
+const alphaPlaceholders = ['%alpha', '<alpha-value>']
+const alphaPlaceholdersRE = new RegExp(alphaPlaceholders.map(v => escapeRegExp(v)).join('|'))
 
 export function hex2rgba(hex = ''): RGBAColorValue | undefined {
   const color = parseHexColor(hex)
@@ -36,12 +39,12 @@ export function parseCssColor(str = ''): CSSColorValue | undefined {
 
 export function colorOpacityToString(color: CSSColorValue) {
   const alpha = color.alpha ?? 1
-  return alpha === '%alpha' ? 1 : alpha
+  return typeof alpha === 'string' && alphaPlaceholders.includes(alpha) ? 1 : alpha
 }
 
 export function colorToString(color: CSSColorValue | string, alphaOverride?: string | number) {
   if (typeof color === 'string')
-    return color.replace('%alpha', `${alphaOverride ?? 1}`)
+    return color.replace(alphaPlaceholdersRE, `${alphaOverride ?? 1}`)
 
   const { components } = color
   let { alpha, type } = color
diff --git a/test/preset-uno.test.ts b/test/preset-uno.test.ts
index 3acdf5a637..0db0daf4c4 100644
--- a/test/preset-uno.test.ts
+++ b/test/preset-uno.test.ts
@@ -130,8 +130,8 @@ const uno = createGenerator({
         b: 'rgba(var(--custom), %alpha)',
         c: 'rgba(var(--custom-c) / %alpha)',
         d: 'hsl(var(--custom-d), %alpha)',
-        e: 'hsl(var(--custom-e) / %alpha)',
-        f: 'lch(var(--custom-f) / %alpha)',
+        e: 'hsl(var(--custom-e) / <alpha-value>)',
+        f: 'lch(var(--custom-f) / <alpha-value>)',
       },
       info: 'hsl(200.1, 100%, 54.3%)',
     },