diff --git a/src/util/colorMXID.js b/src/util/colorMXID.js
index 4d303aa..412af47 100644
--- a/src/util/colorMXID.js
+++ b/src/util/colorMXID.js
@@ -19,7 +19,9 @@ export function hashCode(str) {
 
 export function cssColorMXID(userId) {
   const colorNumber = hashCode(userId) % 8;
-  return `--mx-uc-${colorNumber + 1}`;
+  // @user:a.b.c => -user-a_b_c
+  const escapedUserId = userId.replace(/[@:]/g, '-').replace(/[^\w-]/g, '_');
+  return `--mx-uc-${escapedUserId}, var(--mx-uc-${colorNumber + 1})`;
 }
 
 export default function colorMXID(userId) {