我想创建一个函数,它将接受任何旧字符串(通常是一个单词),并从中以某种方式生成一个十六进制值在#000000和#FFFFFF之间,所以我可以使用它作为HTML元素的颜色。

如果不那么复杂的话,甚至可能是一个简化的十六进制值(例如:#FFF)。事实上,“网络安全”调色板中的颜色是最理想的。


当前回答

还有一个随机颜色的解决方案:

function colorize(str) {
    for (var i = 0, hash = 0; i < str.length; hash = str.charCodeAt(i++) + ((hash << 5) - hash));
    color = Math.floor(Math.abs((Math.sin(hash) * 10000) % 1 * 16777216)).toString(16);
    return '#' + Array(6 - color.length + 1).join('0') + color;
}

对我来说,这是一种混合的工作。 我使用了JFreeman散列函数(也是这个线程中的一个答案)和Asykäri伪随机函数,以及我自己的一些填充和数学。

我怀疑该函数产生均匀分布的颜色,尽管它看起来很好,并做了它应该做的事情。

其他回答

我已经打开了一个pull request to Please.js,它允许从散列中生成颜色。

你可以像这样将字符串映射到一个颜色:

const color = Please.make_color({
    from_hash: "any string goes here"
});

例如,"any string goes here"将返回"#47291b" “another!”返回为“#1f0c3d”

使用hashCode,就像Cristian Sanchez用hsl和现代javascript回答的那样,你可以创建一个具有良好对比度的颜色选择器,如下所示:

函数hashCode(str) { 设hash = 0; For (var I = 0;I < str.length;我+ +){ hash = str.charCodeAt(i) + ((hash << 5) - hash); } 返回哈希; } 函数pickColor(str) { 返回' hsl(${hashCode(str) % 360}, 100%, 80%) '; } one.style.backgroundColor = pickColor(one.innerText) two.style.backgroundColor = pickColor(two.innerText) div { 填充:10 px; } < div id = " 1 " > < / div >一 < div id = "两个“>两个div > < /

因为它是hsl,你可以缩放亮度来得到你想要的对比度。

function hashCode(str) { let hash = 0; for (var i = 0; i < str.length; i++) { hash = str.charCodeAt(i) + ((hash << 5) - hash); } return hash; } function pickColor(str) { // Note the last value here is now 50% instead of 80% return `hsl(${hashCode(str) % 360}, 100%, 50%)`; } one.style.backgroundColor = pickColor(one.innerText) two.style.backgroundColor = pickColor(two.innerText) div { color: white; padding: 10px; } <div id="one">One</div> <div id="two">Two</div>

还有一个随机颜色的解决方案:

function colorize(str) {
    for (var i = 0, hash = 0; i < str.length; hash = str.charCodeAt(i++) + ((hash << 5) - hash));
    color = Math.floor(Math.abs((Math.sin(hash) * 10000) % 1 * 16777216)).toString(16);
    return '#' + Array(6 - color.length + 1).join('0') + color;
}

对我来说,这是一种混合的工作。 我使用了JFreeman散列函数(也是这个线程中的一个答案)和Asykäri伪随机函数,以及我自己的一些填充和数学。

我怀疑该函数产生均匀分布的颜色,尽管它看起来很好,并做了它应该做的事情。

在看了相当密集的代码和相当古老的答案之后,我想我应该从2021年的角度来回顾这个问题,只是为了好玩,希望对任何人都有用。现在有了HSL颜色模型和加密API在几乎所有浏览器(当然除了IE)中实现,它可以像这样简单地解决:

async function getColor(text, minLightness = 40, maxLightness = 80, minSaturation = 30, maxSaturation = 100) { let hash = await window.crypto.subtle.digest("SHA-1", new TextEncoder().encode(text)); hash = new Uint8Array(hash).join("").slice(16); return "hsl(" + (hash % 360) + ", " + (hash % (maxSaturation - minSaturation) + minSaturation) + "%, " + (hash % (maxLightness - minLightness) + minLightness) + "%)"; } function generateColor() { getColor(document.getElementById("text-input").value).then(color => document.querySelector(".swatch").style.backgroundColor = color); } input { padding: 5px; } .swatch { margin-left: 10px; width: 28px; height: 28px; background-color: white; border: 1px solid gray; } .flex { display: flex; } <html> <body> <div class="flex"> <form> <input id="text-input" type="text" onInput="generateColor()" placeholder="Type here"></input> </form> <div class="swatch"></div> </div> </body> </html>

这应该比手动生成散列快得多,并且还提供了一种定义饱和度和亮度的方法,以防你不想要太平或太亮或太暗的颜色(例如,如果你想在这些颜色上写文本)。

下面是另一个尝试:

function stringToColor(str){
  var hash = 0;
  for(var i=0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 3) - hash);
  }
  var color = Math.abs(hash).toString(16).substring(0, 6);

  return "#" + '000000'.substring(0, 6 - color.length) + color;
}