diff --git a/packages/preset-mini/src/utils/utilities.ts b/packages/preset-mini/src/utils/utilities.ts
index ebc05472eb..375cdb00ce 100644
--- a/packages/preset-mini/src/utils/utilities.ts
+++ b/packages/preset-mini/src/utils/utilities.ts
@@ -83,9 +83,9 @@ export function parseColor(body: string, theme: Theme): ParsedColorValue | undef
   const bracket = h.bracketOfColor(main)
   const bracketOrMain = bracket || main
 
-  if (bracketOrMain.startsWith('#'))
+  if (bracketOrMain.match(/^#[\da-fA-F]+/g))
     color = bracketOrMain
-  else if (bracketOrMain.startsWith('hex-'))
+  else if (bracketOrMain.match(/^hex-[\da-fA-F]+/g))
     color = `#${bracketOrMain.slice(4)}`
   else if (main.startsWith('$'))
     color = h.cssvar(main)
diff --git a/test/color.test.ts b/test/color.test.ts
index a6e7d4eb27..2d891e3e54 100644
--- a/test/color.test.ts
+++ b/test/color.test.ts
@@ -170,5 +170,21 @@ describe('color utils', () => {
     expect(fn('danger/$o3')).eql({
       prop: 'hsla(var(--danger),var(--o3))',
     })
+
+    expect(fn('hex-fff')).eql({
+      '--un-v-opacity': 1,
+      'prop': 'rgba(255,255,255,var(--un-v-opacity))',
+    })
+
+    expect(fn('hex-fff/10')).eql({
+      prop: 'rgba(255,255,255,0.1)',
+    })
+
+    expect(fn('$abc')).eql({
+      prop: 'var(--abc)',
+    })
+
+    // invalid
+    expect(fn('hex-invalid')).eql({})
   })
 })