diff --git a/app/assets/javascripts/discourse/components/category-drop.js.es6 b/app/assets/javascripts/discourse/components/category-drop.js.es6
index 88217ef1f61..faa87ea45ce 100644
--- a/app/assets/javascripts/discourse/components/category-drop.js.es6
+++ b/app/assets/javascripts/discourse/components/category-drop.js.es6
@@ -41,6 +41,22 @@ export default Ember.Component.extend({
     return result;
   }.property('category'),
 
+  categoryColor: function() {
+    var category = this.get('category');
+
+    if (category) {
+      var color = get(category, 'color');
+
+      if (color) {
+        var style = "";
+        if (color) { style += "background-color: #" + color + ";" }
+        return style;
+      }
+    }
+
+    return "background-color: #eee;";
+  }.property('category'),
+
   badgeStyle: function() {
     var category = this.get('category');
 
diff --git a/app/assets/javascripts/discourse/templates/components/category-drop.hbs b/app/assets/javascripts/discourse/templates/components/category-drop.hbs
index 83783fcc240..9e50cf11c5d 100644
--- a/app/assets/javascripts/discourse/templates/components/category-drop.hbs
+++ b/app/assets/javascripts/discourse/templates/components/category-drop.hbs
@@ -1,6 +1,6 @@
 {{#if category}}
   <a href {{action "expand"}} class="badge-category" {{bind-attr style="badgeStyle"}}>
-    <span class="badge-category-bg" style="background-color: #{{unbound category.color}};"></span>
+    <span class="badge-category-bg" {{bind-attr style="categoryColor"}}></span>
     {{#if category.read_restricted}}
       {{fa-icon "lock"}}
     {{/if}}