Question

我正在尝试制作一个网页图表，根据该人的姓名显示不同颜色的人，这个名称将与该名称保持一致。

例如，如果我的一个资源是“Jane Doe”，她可能会被计算为海军蓝色，而“John Smith”可能是某种浅绿色。

这里的诀窍是，我需要让Jane和John在图表中出现的颜色保持一致，但与图表中的其他名称明显不同。

有时这个图表只会有一些人，有时它实际上会非常繁忙，所以基于某些有限集来分配颜色方案对我来说似乎是一个坏主意。

此外，我需要使前景色与背景色很好地对比，以便图表易于阅读。

如何在网页中执行此操作？我正在构想两个javascript函数：getBackColor(name)和getForeColor(name)但如果有更好的方法可以解决这个问题，我并不认同这个想法。

Answer 1

我不确定我是否可以帮助你，但如果在类似情况下我会怎么做：

我将创建一个函数来从名称中获取颜色。此功能需要完成以下事项：

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

在这种情况下，这样的事情应该有效：

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 + ')';

}

如果您想要两种不同颜色的相同名称，您可以编写不同的功能，以相同或类似的原则获得不同的颜色，或根据名称提供不同的字符串。例如，使用名称反转调用相同的函数。这样，您将有两种不同的颜色可以为每个名称重现，每个不同的名称应该有不同的颜色。确保生成的颜色对比但是......好吧，我不确定该怎么做。在我看来，你会找到解释当两种颜色形成对比（查看它们的代码）然后限制你的功能以创建几种对比色的信息。很抱歉，如果这样做不够有用，当您发现两种颜色形成对比时，原则应该可以使用，具体取决于它们的代码。

PS：嘿，我发现一个网站似乎准确地给出了公式如何计算两种颜色是否足够对比。 How to Calculate Color Contrast from RGB Values

Answer 2

我会使用名称中字符的ascii值来生成颜色。这样每个名称都会有不同的颜色。

Answer 3

你可以尝试的一件事是拿一个名字和MD5哈希吧。这会为您提供一个较大的十六进制值，但您可以去掉前六个字符并将其用作颜色。

有许多JavaScript MD5库，但这里有一个我之前使用过的，它运行得很好：http://www.webtoolkit.info/javascript-md5.html

基于javascript中的字符串创建自定义颜色方案

3 个答案: