diff --git a/js/models/conversations.js b/js/models/conversations.js
index ca2c8c168..9c94f34a8 100644
--- a/js/models/conversations.js
+++ b/js/models/conversations.js
@@ -1375,7 +1375,7 @@
 
     getColor() {
       if (!this.isPrivate()) {
-        return null;
+        return 'signal-blue';
       }
 
       const { migrateColor } = Util;
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 56a130585..785991e37 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -2036,6 +2036,9 @@
   background-color: $color-conversation-grey;
 }
 
+.module-avatar--signal-blue {
+  background-color: $color-signal-blue;
+}
 .module-avatar--red {
   background-color: $color-conversation-red;
 }
diff --git a/ts/components/Avatar.md b/ts/components/Avatar.md
index c80850e44..5e15cb4b1 100644
--- a/ts/components/Avatar.md
+++ b/ts/components/Avatar.md
@@ -60,6 +60,13 @@
 ### All colors
 
 ```jsx
+<Avatar
+  size={28}
+  color="signal-blue"
+  name="Group"
+  conversationType="group"
+  i18n={util.i18n}
+/>
 <Avatar
   size={28}
   color="red"