0

I'm trying to make a web chart which displays various people in a different color based off of the person's name, that will be consistent for that name.

For example, if one of my resources was "Jane Doe", she might be calculated to have a navy blueish color, and "John Smith" could be some sort of light green.

The trick here is that I would need to make the color consistent for Jane and John wherever they showed up in the chart, but be noticeably different from every other name on the chart.

Sometimes this chart will only have a few people, and sometimes it will actually be pretty busy, so assigning color schemes based off of some finite set seems like a bad idea to me.

Additionally, I would need to make the foreground color contrast well with the background color, so that the chart was easy to read.

How can I do this in a webpage? I am envisioning two javascript functions: getBackColor(name) and getForeColor(name) but I'm not married to the idea if there's a better way to approach this.

Improve this question
1
  • add all the ascii values of the word modulo 256 and you have a different color for each name (so to speak). You can divide the name in 3 parts and then do modulo 256 and apply an RGB value. This is from the top of my mind, there are probably better solutions out there. Commented Aug 8, 2014 at 13:54

3 Answers 3

Reset to default
1

I am not sure if I can help you, but what I would do if in similar scenario:

I will create a function to get me a color from a name. This function needs to accomplish the following things:

 1. Return the same results with the same name every time.
 2. Be relatively random.

In this case something like this should work:

function getColorFromName(name) { 

var red = 0;
   for (var i = 0; i < name.length; i++) { 
      red += name.charCodeAt(i);
   }
   red = red % 255;

   var green = 0; 
   for (var j = 0; j < name.length; j++) { 
      green += j * name.charCodeAt(j);
   }
   green = green % 255;

   var blue = 1;
   for (var k = 0; k < name.length; k++) { 
      blue = blue * name.charCodeAt(k);
   }
   blue = blue % 255;

   return 'rgb(' + red + ',' + green + ',' + blue + ')';

}

If you want two different colors for the same name, you can either write a different function to get you a different color on the same or similar principle, or supply a different string based on the name. Calling the same function with the name reversed for example. This way you will have two different colours that are reproducable for each name, and every different name should have different colour. Making sure the generated colors contrast however ... well, Im not really sure how to do that. In my mind you would find information that explaines when two colors contrast (looking at their codes) and then limit your function to create you a couple of contrasting colors. Sorryy if that is not helpful enough, the principle should be usable when you find out when two colors are contrasting depending on their codes.

PS: Hey, I found a site that seems to give exactly formulas how to calculate if two colors contrast well enough. How to Calculate Color Contrast from RGB Values

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I like the idea; it's a bit expensive but I bet I can work on that.
0

I would use the ascii values for the characters in the names to generate the colour then. This way each name will have a different colour.

Improve this answer

Comments

0

One thing you could try is to take a name and MD5 hash it. This gives you a large hex value, but you could strip off the first 6 characters and use that as the color.

There are many JavaScript MD5 libraries, but here is one that I've used before and it worked pretty well: http://www.webtoolkit.info/javascript-md5.html

Improve this answer

1 Comment

that's a nice one, depending on how many colors need to be generated, could also be a bit expensive.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.