Question

我想使用Javascript根据人名从预定义的颜色列表中选择一种颜色。

我想要一个彩色圆圈，中间是人名的第一个字母。所期望的效果非常类似于Google对在收件箱或联系人等应用中没有与其帐户关联的图片的用户所做的事情。

我希望为名称返回的颜色始终与名称的颜色相同，因此使用随机数是不可能的。

我不想在＃000000和#FFFFFF之间生成十六进制颜色，因为我想控制调色板，并且想要限制颜色的数量，所以这个问题的答案是不够的。

有什么想法吗？

Answer 1

为什么不使用哈希表？

只需创建一些算法来散列一个人的名字，然后根据你想要的颜色长度进行修改。例如：

var colours = ['#345321', '#888888', '#000011'];
function generateColour( name ){
    // this is NOT a great hash but serves as an example
    var sum = 0;
    for (var i = 0; i < name.length; i++){
        sum += name.charAt(i);
    }
    return sum % colours.length;
}

console.log( colours[generateColour( "Steve" )] );

快速使用字符串哈希算法的Google可以为您提供更好的算法。

Answer 2

将您允许的颜色放在数组中，并使用名称哈希的最后一位数来从数组中选择颜色。

Answer 3

您需要将字符串散列为数字并将该数字缩小为有效色调。色调是调色板中的一个角度，从0到360，因此您只需执行hash % 360即可一个有效的色调。然后，您可以使用hsl（）CSS3函数hsl(hue, 100%, 50%)制作颜色。通过使饱和度和亮度固定，您将获得更好的效果。这是一个CSS函数，因此您必须将其写入JavaScript字符串并将该字符串设置为CSS颜色。

根据Javascript中的名称生成颜色

3 个答案: