diff --git a/ember/app/helpers/user-avatar.js b/ember/app/helpers/user-avatar.js
index 470a9f427..a989675b4 100644
--- a/ember/app/helpers/user-avatar.js
+++ b/ember/app/helpers/user-avatar.js
@@ -1,57 +1,22 @@
 import Ember from 'ember';
 
-function hsvToRgb(h, s, v) {
-    var r, g, b, i, f, p, q, t;
-    if (h && s === undefined && v === undefined) {
-        s = h.s; v = h.v; h = h.h;
-    }
-    i = Math.floor(h * 6);
-    f = h * 6 - i;
-    p = v * (1 - s);
-    q = v * (1 - f * s);
-    t = v * (1 - (1 - f) * s);
-    switch (i % 6) {
-        case 0: r = v; g = t; b = p; break;
-        case 1: r = q; g = v; b = p; break;
-        case 2: r = p; g = v; b = t; break;
-        case 3: r = p; g = q; b = v; break;
-        case 4: r = t; g = p; b = v; break;
-        case 5: r = v; g = p; b = q; break;
-    }
-    return {
-        r: Math.floor(r * 255),
-        g: Math.floor(g * 255),
-        b: Math.floor(b * 255)
-    };
-}
-
 export default Ember.Handlebars.makeBoundHelper(function(user, options) {
-    if (!user) {
-        return;
+  var attributes = 'class="avatar '+options.hash.class+'"';
+  var content = '';
+
+  if (user) {
+    var username = user.get('username') || '?';
+    attributes += ' title="'+Ember.Handlebars.Utils.escapeExpression(username)+'"';
+
+    var avatarUrl = user.get('avatarUrl');
+    if (avatarUrl) {
+      return new Ember.Handlebars.SafeString('<img src="'+avatarUrl+'" '+attributes+'>');
     }
 
-    // var number;
-    // if (number = user.get('avatarNumber')) {
-    //     number = number + '';
-    //     var filename = number.length >= 3 ? number : new Array(3 - number.length + 1).join('0') + number;
-    //     return new Ember.Handlebars.SafeString('<img src="/packages/flarum/core/avatars/'+filename+'.jpg" class="avatar '+options.hash.class+'">');
-    // }
+    content = username.charAt(0).toUpperCase();
+    attributes += ' style="background:'+user.get('color')+'"';
+  }
 
-	var username = user.get('username');
-    if (!username) {
-        username = '?';
-    }
-
-	var letter = username.charAt(0).toUpperCase();
-
-	var num = 0;
-	for (var i = 0; i < username.length; i++) {
-		num += username.charCodeAt(i) * 13;
-	}
-
-	var hue = num % 360;
-	var rgb = hsvToRgb(hue / 360, 100 / 255, 200 / 255);
-	var bg = ''+rgb.r.toString(16)+rgb.g.toString(16)+rgb.b.toString(16);
-	return new Ember.Handlebars.SafeString('<span class="avatar '+options.hash.class+'" style="background:#'+bg+'" title="'+username+'">'+letter+'</span>');
+  return new Ember.Handlebars.SafeString('<span '+attributes+'>'+content+'</span>');
 });
 
diff --git a/ember/app/models/user.js b/ember/app/models/user.js
index 51a17e774..5b5a9d037 100644
--- a/ember/app/models/user.js
+++ b/ember/app/models/user.js
@@ -1,5 +1,7 @@
 import DS from 'ember-data';
 
+import stringToColor from 'flarum/utils/string-to-color';
+
 export default DS.Model.extend({
   username: DS.attr('string'),
   email: DS.attr('string'),
@@ -16,5 +18,9 @@ export default DS.Model.extend({
   postsCount: DS.attr('number'),
 
   canEdit: DS.attr('boolean'),
-  canDelete: DS.attr('boolean')
+  canDelete: DS.attr('boolean'),
+
+  color: Ember.computed('username', function() {
+    return '#'+stringToHex(this.get('username'));
+  })
 });
diff --git a/ember/app/utils/string-to-color.js b/ember/app/utils/string-to-color.js
new file mode 100644
index 000000000..150beb70a
--- /dev/null
+++ b/ember/app/utils/string-to-color.js
@@ -0,0 +1,36 @@
+import Ember from 'ember';
+
+function hsvToRgb(h, s, v) {
+  var r, g, b, i, f, p, q, t;
+  if (h && s === undefined && v === undefined) {
+    s = h.s; v = h.v; h = h.h;
+  }
+  i = Math.floor(h * 6);
+  f = h * 6 - i;
+  p = v * (1 - s);
+  q = v * (1 - f * s);
+  t = v * (1 - (1 - f) * s);
+  switch (i % 6) {
+    case 0: r = v; g = t; b = p; break;
+    case 1: r = q; g = v; b = p; break;
+    case 2: r = p; g = v; b = t; break;
+    case 3: r = p; g = q; b = v; break;
+    case 4: r = t; g = p; b = v; break;
+    case 5: r = v; g = p; b = q; break;
+  }
+  return {
+    r: Math.floor(r * 255),
+    g: Math.floor(g * 255),
+    b: Math.floor(b * 255)
+  };
+}
+
+export default function(string) {
+  var num = 0;
+  for (var i = 0; i < string.length; i++) {
+    num += string.charCodeAt(i);
+  }
+  var hue = num % 360;
+  var rgb = hsvToRgb(hue / 360, 100 / 255, 200 / 255);
+  return ''+rgb.r.toString(16)+rgb.g.toString(16)+rgb.b.toString(16);
+};