diff --git a/src/domain/session/leftpanel/BaseTileViewModel.js b/src/domain/session/leftpanel/BaseTileViewModel.js
index 62ea6380..95e91458 100644
--- a/src/domain/session/leftpanel/BaseTileViewModel.js
+++ b/src/domain/session/leftpanel/BaseTileViewModel.js
@@ -69,7 +69,7 @@ export class BaseTileViewModel extends ViewModel {
     }
 
     get avatarColorNumber() {
-        return getIdentifierColorNumber(this._avatarSource.id);
+        return getIdentifierColorNumber(this._avatarSource.avatarColorId);
     }
 
     avatarUrl(size) {
diff --git a/src/domain/session/rightpanel/RoomDetailsViewModel.js b/src/domain/session/rightpanel/RoomDetailsViewModel.js
index 911e5945..b9f05835 100644
--- a/src/domain/session/rightpanel/RoomDetailsViewModel.js
+++ b/src/domain/session/rightpanel/RoomDetailsViewModel.js
@@ -34,7 +34,7 @@ export class RoomDetailsViewModel extends ViewModel {
     }
 
     get avatarColorNumber() {
-        return getIdentifierColorNumber(this.roomId)
+        return getIdentifierColorNumber(this._room.avatarColorId)
     }
 
     avatarUrl(size) {
diff --git a/src/domain/session/room/InviteViewModel.js b/src/domain/session/room/InviteViewModel.js
index a9cc917f..81a08e44 100644
--- a/src/domain/session/room/InviteViewModel.js
+++ b/src/domain/session/room/InviteViewModel.js
@@ -56,7 +56,7 @@ export class InviteViewModel extends ViewModel {
     }
 
     get avatarColorNumber() {
-        return getIdentifierColorNumber(this._invite.id)
+        return getIdentifierColorNumber(this._invite.avatarColorId)
     }
 
     avatarUrl(size) {
diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js
index 4d53ec6c..38835db3 100644
--- a/src/domain/session/room/RoomViewModel.js
+++ b/src/domain/session/room/RoomViewModel.js
@@ -119,7 +119,7 @@ export class RoomViewModel extends ViewModel {
     }
 
     get avatarColorNumber() {
-        return getIdentifierColorNumber(this._room.id)
+        return getIdentifierColorNumber(this._room.avatarColorId)
     }
 
     avatarUrl(size) {
diff --git a/src/matrix/room/BaseRoom.js b/src/matrix/room/BaseRoom.js
index cef443c1..9d33c5c5 100644
--- a/src/matrix/room/BaseRoom.js
+++ b/src/matrix/room/BaseRoom.js
@@ -341,6 +341,16 @@ export class BaseRoom extends EventEmitter {
         return null;
     }
 
+    /**
+     * Retrieve the identifier that should be used to color
+     * this room's avatar. By default this is the room's
+     * ID, but DM rooms should be the same color as their
+     * user's avatar.
+     */
+    get avatarColorId() {
+        return this._roomId;
+    }
+
     get lastMessageTimestamp() {
         return this._summary.data.lastMessageTimestamp;
     }
diff --git a/src/matrix/room/Invite.js b/src/matrix/room/Invite.js
index aa25b0c6..ce400f01 100644
--- a/src/matrix/room/Invite.js
+++ b/src/matrix/room/Invite.js
@@ -56,6 +56,11 @@ export class Invite extends EventEmitter {
         return this._inviteData.avatarUrl;
     }
 
+    /** @see BaseRoom.avatarColorId */
+    get avatarColorId() {
+        return this._inviteData.avatarColorId;
+    }
+
     get timestamp() {
         return this._inviteData.timestamp;
     }
@@ -175,6 +180,7 @@ export class Invite extends EventEmitter {
     _createData(inviteState, myInvite, inviter, summaryData, heroes) {
         const name = heroes ? heroes.roomName : summaryData.name;
         const avatarUrl = heroes ? heroes.roomAvatarUrl : summaryData.avatarUrl;
+        const avatarColorId = heroes ? heroes.roomAvatarColorId : this.id;
         return {
             roomId: this.id,
             isEncrypted: !!summaryData.encryption,
@@ -182,6 +188,7 @@ export class Invite extends EventEmitter {
 //            type: 
             name,
             avatarUrl,
+            avatarColorId,
             canonicalAlias: summaryData.canonicalAlias,
             timestamp: this._platform.clock.now(),
             joinRule: this._getJoinRule(inviteState),
diff --git a/src/matrix/room/Room.js b/src/matrix/room/Room.js
index 482d167f..a8e94326 100644
--- a/src/matrix/room/Room.js
+++ b/src/matrix/room/Room.js
@@ -328,6 +328,10 @@ export class Room extends BaseRoom {
         });
     }
 
+    get avatarColorId() {
+        return this._heroes?.roomAvatarColorId || this._roomId;
+    }
+
     get isUnread() {
         return this._summary.data.isUnread;
     }
diff --git a/src/matrix/room/members/Heroes.js b/src/matrix/room/members/Heroes.js
index f6ad3085..29732def 100644
--- a/src/matrix/room/members/Heroes.js
+++ b/src/matrix/room/members/Heroes.js
@@ -97,4 +97,21 @@ export class Heroes {
         }
         return null;
     }
+
+    /**
+     * In DM rooms, we want the room's color to be
+     * the same as the other user's color. Thus, if the room
+     * only has one hero, we use their ID, instead
+     * of the room's, to get the avatar color.
+     *
+     * @returns {?string} the ID of the single hero.
+     */
+    get roomAvatarColorId() {
+        if (this._members.size === 1) {
+            for (const member of this._members.keys()) {
+                return member
+            }
+        }
+        return null;
+    }
 }