diff --git a/web/app/components/workflow/collaboration/components/user-cursors.tsx b/web/app/components/workflow/collaboration/components/user-cursors.tsx
index 799972b0b8b..f0a827306ed 100644
--- a/web/app/components/workflow/collaboration/components/user-cursors.tsx
+++ b/web/app/components/workflow/collaboration/components/user-cursors.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { CursorPosition, OnlineUser } from '@/app/components/workflow/collaboration/types'
+import { getUserColor } from '../utils/user-color'
 
 type UserCursorsProps = {
   cursors: Record<string, CursorPosition>
@@ -7,15 +8,6 @@ type UserCursorsProps = {
   onlineUsers: OnlineUser[]
 }
 
-const getUserColor = (id: string) => {
-  const colors = ['#3B82F6', '#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#06B6D4', '#84CC16']
-  const hash = id.split('').reduce((a, b) => {
-    a = ((a << 5) - a) + b.charCodeAt(0)
-    return a & a
-  }, 0)
-  return colors[Math.abs(hash) % colors.length]
-}
-
 const UserCursors: FC<UserCursorsProps> = ({
   cursors,
   myUserId,
diff --git a/web/app/components/workflow/collaboration/utils/user-color.ts b/web/app/components/workflow/collaboration/utils/user-color.ts
new file mode 100644
index 00000000000..ecdba509b58
--- /dev/null
+++ b/web/app/components/workflow/collaboration/utils/user-color.ts
@@ -0,0 +1,12 @@
+/**
+ * Generate a consistent color for a user based on their ID
+ * Used for cursor colors and avatar backgrounds
+ */
+export const getUserColor = (id: string): string => {
+  const colors = ['#3B82F6', '#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#06B6D4', '#84CC16']
+  const hash = id.split('').reduce((a, b) => {
+    a = ((a << 5) - a) + b.charCodeAt(0)
+    return a & a
+  }, 0)
+  return colors[Math.abs(hash) % colors.length]
+}
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
index a48ae40934e..ecccd3cb5bc 100644
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -4,15 +4,7 @@ import { useCollaboration } from '../collaboration/hooks/use-collaboration'
 import { useStore } from '../store'
 import cn from '@/utils/classnames'
 import { ChevronDown } from '@/app/components/base/icons/src/vender/solid/arrows'
-
-const getUserColor = (id: string) => {
-  const colors = ['#3B82F6', '#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#06B6D4', '#84CC16']
-  const hash = id.split('').reduce((a, b) => {
-    a = ((a << 5) - a) + b.charCodeAt(0)
-    return a & a
-  }, 0)
-  return colors[Math.abs(hash) % colors.length]
-}
+import { getUserColor } from '../collaboration/utils/user-color'
 
 const OnlineUsers = () => {
   const appId = useStore(s => s.appId)