diff --git a/js/models/conversations.js b/js/models/conversations.js
index acac1436..909320d8 100644
--- a/js/models/conversations.js
+++ b/js/models/conversations.js
@@ -349,11 +349,7 @@
             this.trigger('change');
         }
     },
-    getAvatar: function() {
-        if (this.avatarUrl === undefined) {
-            this.updateAvatarUrl(true);
-        }
-
+    getColor: function() {
         var title = this.get('name');
         var color = this.get('color');
         if (!color) {
@@ -367,6 +363,15 @@
                 color = 'default';
             }
         }
+        return color;
+    },
+    getAvatar: function() {
+        if (this.avatarUrl === undefined) {
+            this.updateAvatarUrl(true);
+        }
+
+        var title = this.get('name');
+        var color = this.getColor();
 
         if (this.avatarUrl) {
             return { url: this.avatarUrl, color: color };
@@ -543,4 +548,6 @@
         });
     }
   });
+
+  Whisper.Conversation.COLORS = COLORS.concat(['grey', 'default']).join(' ');
 })();
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index f13a0d26..27cafb7d 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -39,7 +39,7 @@
         },
         initialize: function(options) {
             this.listenTo(this.model, 'destroy', this.stopListening);
-            this.listenTo(this.model, 'change:avatar', this.updateAvatar);
+            this.listenTo(this.model, 'change:color', this.updateColor);
             this.listenTo(this.model, 'change:name', this.updateTitle);
             this.listenTo(this.model, 'newmessage', this.addMessage);
             this.listenTo(this.model, 'opened', this.onOpened);
@@ -319,12 +319,17 @@
             this.$('.conversation-title').text(this.model.getTitle());
         },
 
-        updateAvatar: function() {
+        updateColor: function(model, color) {
+            var header = this.$('.conversation-header');
+            header.removeClass(Whisper.Conversation.COLORS);
+            if (color) {
+                header.addClass(color);
+            }
             var avatarView = new (Whisper.View.extend({
                 templateName: 'avatar',
                 render_attributes: { avatar: this.model.getAvatar() }
             }))();
-            this.$('.conversation-header .avatar').replaceWith(avatarView.render().$('.avatar'));
+            header.find('.avatar').replaceWith(avatarView.render().$('.avatar'));
         },
 
         updateMessageFieldSize: function (event) {
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 6c20f39c..20dea9cd 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -39,6 +39,11 @@
             this.listenTo(this.model, 'pending', this.renderPending);
             this.listenTo(this.model, 'done', this.renderDone);
             this.timeStampView = new Whisper.ExtendedTimestampView();
+
+            this.contact = this.model.isIncoming() ? this.model.getContact() : null;
+            if (this.contact) {
+                this.listenTo(this.contact, 'change:color', this.updateColor);
+            }
         },
         events: {
             'click .retry': 'retryMessage',
@@ -143,6 +148,18 @@
 
             return this;
         },
+        updateColor: function(model, color) {
+            var bubble = this.$('.bubble');
+            bubble.removeClass(Whisper.Conversation.COLORS);
+            if (color) {
+                bubble.addClass(color);
+            }
+            var avatarView = new (Whisper.View.extend({
+                templateName: 'avatar',
+                render_attributes: { avatar: model.getAvatar() }
+            }))();
+            this.$('.avatar').replaceWith(avatarView.render().$('.avatar'));
+        },
         loadAttachments: function() {
             this.model.get('attachments').forEach(function(attachment) {
                 var view = new Whisper.AttachmentView({ model: attachment });