如何使用javascript将字符串转换为十六进制颜色答案

【问题标题】：how can I convert string to hex color with javascript如何使用javascript将字符串转换为十六进制颜色
【发布时间】：2013-07-26 15:58:15
【问题描述】：

我有一个名称列表，通常从 sql 更新，在 html5 中，是否可以使用 javascript 或 jquery 使相同的名称颜色相同...

我尝试将字符串转换为十六进制，但无法将其转换为颜色代码。

问候...

【问题讨论】：

你能举几个“名字”的例子吗？
这在当前形式下毫无意义。你能澄清一下你的情况吗？
“Bill”、“Joe”、“Olivia”……但名字可以不同……
@user2081672：这些名字和颜色有什么关系？你想用什么颜色？
那么比尔是什么颜色的？如果有荷马，他会是黄色的！

标签： javascript string colors hex

【解决方案1】：

好的，假设您没有任何特定的颜色，我使用随机颜色生成器函数完成了此操作。

你可以做的是循环你的名字列表，并为每个新名字在字典中存储一个新的颜色值。然后，您可以在这本词典中查找您已经使用过的名称并获得相同的颜色。

例如：

假设你的html简单如下：

<ul></ul>

你可以使用这个javascript：

var names = [
    "Bill", "Joe", "Oliver", "Joe", "George", "Bill", "George", "John"];
var currentAssignments = {};

for (var i = 0; i < names.length; i++) {
    var name = names[i];
    var colour = currentAssignments[name];
    if (!colour) {
        colour = GetRandomColour();
        currentAssignments[name] = colour;
    }
    var li = $("<li>").html(name).css("color", colour);
    $("ul").append(li);
}

function GetRandomColour() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

Here is a working example

或者，如果您有预定义的颜色数组（并假设您确定有足够的独特颜色来满足所有名称），您可以这样做：

var colours = ["#F00", "#0F0", "#00F"];

并替换GetRandomColour()函数如下：

function GetRandomColour() {
    return colours.pop();
}

Here is an example

【讨论】：

【解决方案2】：

这就是我的做法。

创建一个函数，它接受一个名称并输出随机颜色，但它并不是真正随机的，因为它使用名称来创建颜色，因此它总是会为相同的名称返回相同的颜色：

function nameToColor(name) {
    var n = 'abcdefghijklmnopqrstuvwxyz'.split('');
    var r = name.split('').map(function(e) {return n.indexOf(e);}).join('');
    var l = parseFloat( '0.'+ (r*r*1000).toString().replace(/^0/, ''));
    return '#'+Math.floor(l*16777215).toString(16);
}

FIDDLE

【讨论】：