Assign unique color to user profiles in AngularJS

Question

we would like to assign a unique color to profile users in an angularJS,NodeJs, MongoDB app. The idea is to be able to assign and identify a list of users (100 or more) with a unique color.

Any ideas?

Answer 1

In my opinion, the idea would be to compute the color in a mathematical and reproducible way. Benefit would be to not have to store this color in database, but let your app calculate it :

• Pick something quite unique, maybe with the user id and user name concatenated.
• You calculate the string hash, then you convert the hash to a number.
• You pick a list of colors and then you associate the color and the hash number.

Here is a fiddle

//HASH FUNCTION
String.prototype.hashCode = function() {
  let hash = 0, i, chr, len;
  if (this.length === 0) return hash;
  for (i = 0, len = this.length; i < len; i++) {
    chr   = this.charCodeAt(i);
    hash  = ((hash << 5) - hash) + chr;
    hash |= 0; // Convert to 32bit integer
  }
  return hash;
};

let users = [
    {id: 111, name: 'John Doe'},
    {id: 220, name: 'John Doe'},
    {id: 305, name: 'John Doe'},
    {id: 306, name: 'John Doe'},
    {id: 310, name: 'Jane Doe'},
    {id: 315, name: 'Jane Doe'},
    {id: 320, name: 'Jane Doe'}
];
let hashes = [];

users.map((user) => {
    //CALCULATE HASH
    let hash = (user.id + user.name).hashCode() + '';

    //CONVERT HASH TO NUMBER
    let total = 0;
    for (let i = 0; i < hash.length; i++) {
        if (Number(hash[i])) {
          total += Number(hash[i]);
        }
    }
    hashes.push(total);
});

//PICK YOUR COLORS
let colors = ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C', '#FF8A80', '#FF5252', '#FF1744', '#D50000', '#FCE4EC', '#F8BBD0', '#F48FB1', '#F06292', '#EC407A', '#E91E63', '#D81B60', '#C2185B', '#AD1457', '#880E4F', '#FF80AB', '#FF4081', '#F50057', '#C51162', '#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C', '#EA80FC', '#E040FB', '#D500F9', '#AA00FF', '#EDE7F6', '#D1C4E9', '#B39DDB', '#9575CD', '#7E57C2', '#673AB7', '#5E35B1', '#512DA8', '#4527A0', '#311B92', '#B388FF', '#7C4DFF', '#651FFF', '#6200EA', '#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E', '#8C9EFF', '#536DFE', '#3D5AFE', '#304FFE', '#E3F2FD', '#BBDEFB', '#90CAF9', '#64B5F6', '#42A5F5', '#2196F3', '#1E88E5', '#1976D2', '#1565C0', '#0D47A1', '#82B1FF', '#448AFF', '#2979FF', '#2962FF', '#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B', '#80D8FF', '#40C4FF', '#00B0FF', '#0091EA', '#E0F7FA', '#B2EBF2', '#80DEEA', '#4DD0E1', '#26C6DA', '#00BCD4', '#00ACC1', '#0097A7', '#00838F', '#006064', '#84FFFF', '#18FFFF', '#00E5FF', '#00B8D4', '#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40', '#A7FFEB', '#64FFDA', '#1DE9B6', '#00BFA5'];

//ASSOCIATE COLOR AND USER
let result = [];
hashes.map((item, i) => {
    let person = {
        name: users[i].name,
        color: colors[item % colors.length]
    }
    result.push(person);
});

Hope it could give you some ideas :)