diff --git a/client/src/components/Budget/BudgetPanel.helpers.ts b/client/src/components/Budget/BudgetPanel.helpers.ts
index 020aa33ea..bdb2f00ae 100644
--- a/client/src/components/Budget/BudgetPanel.helpers.ts
+++ b/client/src/components/Budget/BudgetPanel.helpers.ts
@@ -75,7 +75,8 @@ export function splitColorFor(userId: number, order: number) {
 }
 
 export function colorForUserId(userId: number) {
-  return SPLIT_COLORS[((userId | 0) - 1 + SPLIT_COLORS.length * 1000) % SPLIT_COLORS.length]
+  const id = Number.isFinite(userId) ? Math.trunc(userId) : 0
+  return SPLIT_COLORS[(id - 1 + SPLIT_COLORS.length * 1000) % SPLIT_COLORS.length]
 }
 
 /**
diff --git a/client/src/components/Budget/BudgetPanel.test.tsx b/client/src/components/Budget/BudgetPanel.test.tsx
index 7844e766d..dfe36963e 100644
--- a/client/src/components/Budget/BudgetPanel.test.tsx
+++ b/client/src/components/Budget/BudgetPanel.test.tsx
@@ -371,7 +371,7 @@ describe('BudgetPanel', () => {
             { user_id: 2, username: 'bob', balance: 10, avatar_url: null },
           ],
           flows: [
-            { from: { username: 'alice', avatar_url: null }, to: { username: 'bob', avatar_url: null }, amount: 10 },
+            { from: { user_id: 1, username: 'alice', avatar_url: null }, to: { user_id: 2, username: 'bob', avatar_url: null }, amount: 10 },
           ],
         })
       )
@@ -465,7 +465,7 @@ describe('BudgetPanel', () => {
             { user_id: 1, username: 'alice', avatar_url: '/uploads/avatars/alice.jpg', balance: -30 },
             { user_id: 2, username: 'bob', avatar_url: null, balance: 30 },
           ],
-          flows: [{ from: { username: 'alice', avatar_url: '/uploads/avatars/alice.jpg' }, to: { username: 'bob', avatar_url: null }, amount: 30 }]
+          flows: [{ from: { user_id: 1, username: 'alice', avatar_url: '/uploads/avatars/alice.jpg' }, to: { user_id: 2, username: 'bob', avatar_url: null }, amount: 30 }]
         })
       ),
       http.get('/api/trips/1/budget/per-person', () => HttpResponse.json({ summary: [] })),
diff --git a/client/src/components/Planner/TravelerPicker.tsx b/client/src/components/Planner/TravelerPicker.tsx
index 68995c967..4ccb6b248 100644
--- a/client/src/components/Planner/TravelerPicker.tsx
+++ b/client/src/components/Planner/TravelerPicker.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from '../../i18n'
 // picker, the card and the cost-split chips (mirrors BudgetPanel.helpers).
 function colorFor(userId: number) {
   const n = SPLIT_COLORS.length
-  return SPLIT_COLORS[((((userId | 0) - 1) % n) + n) % n]
+  return SPLIT_COLORS[(((Math.trunc(userId) - 1) % n) + n) % n]
 }
 
 function Avatar({ userId, username, avatarUrl, size = 22, dim = false }: {