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

Create a custom color scheme based off a string in javascript

本文关键字：自定义 方案 字符串 javascript 创建      更新时间：2023-09-26

我想做一个网页图表，显示不同的人在一个不同的颜色基于人的名字，这将是一致的名称。

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

这里的技巧是，我需要使Jane和John在图表中出现的颜色一致，但与图表上的其他名字明显不同。

有时这个图表只有几个人，有时它实际上会很忙，所以根据一些有限的集合分配配色方案对我来说似乎是一个坏主意。

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

如何在网页中执行此操作?我正在设想两个javascript函数:getBackColor(name)和getForeColor(name)，但我不结婚的想法，如果有一个更好的方法来接近这个

我不确定我是否能帮助你，但是如果在类似的情况下我会怎么做:

我将创建一个函数从名称中获取颜色。这个函数需要完成以下事情:

 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:嘿，我发现了一个网站，似乎给出了精确的公式如何计算两种颜色对比是否足够好。如何从RGB值计算颜色对比度

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

您可以尝试的一种方法是获取名称并对其进行MD5散列。这将为您提供一个较大的十六进制值，但您可以去掉前6个字符并将其用作颜色。

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

相关文章：