我想创建一个函数，它将接受任何旧字符串(通常是一个单词)，并从中以某种方式生成一个十六进制值在#000000和#FFFFFF之间，所以我可以使用它作为HTML元素的颜色。
如果不那么复杂的话，甚至可能是一个简化的十六进制值(例如:#FFF)。事实上，“网络安全”调色板中的颜色是最理想的。
当前回答
下面是我提出的一个解决方案，根据输入字符串生成美观的粉彩颜色。它使用字符串的前两个字符作为随机种子，然后基于该种子生成R/G/B。
它可以很容易地扩展，以便种子是字符串中所有字符的异或，而不仅仅是前两个字符。
灵感来自David Crow的回答:算法随机生成一个美观的调色板
//magic to convert strings to a nice pastel colour based on first two chars
//
// every string with the same first two chars will generate the same pastel colour
function pastel_colour(input_str) {
//TODO: adjust base colour values below based on theme
var baseRed = 128;
var baseGreen = 128;
var baseBlue = 128;
//lazy seeded random hack to get values from 0 - 256
//for seed just take bitwise XOR of first two chars
var seed = input_str.charCodeAt(0) ^ input_str.charCodeAt(1);
var rand_1 = Math.abs((Math.sin(seed++) * 10000)) % 256;
var rand_2 = Math.abs((Math.sin(seed++) * 10000)) % 256;
var rand_3 = Math.abs((Math.sin(seed++) * 10000)) % 256;
//build colour
var red = Math.round((rand_1 + baseRed) / 2);
var green = Math.round((rand_2 + baseGreen) / 2);
var blue = Math.round((rand_3 + baseBlue) / 2);
return { red: red, green: green, blue: blue };
}
GIST在这里:https://gist.github.com/ro-sharp/49fd46a071a267d9e5dd
其他回答
如果您的输入差异不足以让一个简单的哈希使用整个颜色光谱，您可以使用一个种子随机数生成器而不是哈希函数。
我用的是乔·弗里曼的答案中的颜色编码器，还有大卫·鲍的种子随机数生成器。
function stringToColour(str) {
Math.seedrandom(str);
var rand = Math.random() * Math.pow(255,3);
Math.seedrandom(); // don't leave a non-random seed in the generator
for (var i = 0, colour = "#"; i < 3; colour += ("00" + ((rand >> i++ * 8) & 0xFF).toString(16)).slice(-2));
return colour;
}
我的代码是Java的。
谢谢你做的一切。
public static int getColorFromText(String text)
{
if(text == null || text.length() < 1)
return Color.BLACK;
int hash = 0;
for (int i = 0; i < text.length(); i++)
{
hash = text.charAt(i) + ((hash << 5) - hash);
}
int c = (hash & 0x00FFFFFF);
c = c - 16777216;
return c;
}
2023版本普通和简单的TypeScript箭头函数，返回HSL颜色。
const stringToColor = (value: string) => {
let hash = 0;
for (let i = 0; i < value.length; i++) {
hash = value.charCodeAt(i) + ((hash << 5) - hash);
}
return `hsl(${hash % 360}, 85%, 35%)`;
};
还有一个随机颜色的解决方案:
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>
这应该比手动生成散列快得多，并且还提供了一种定义饱和度和亮度的方法，以防你不想要太平或太亮或太暗的颜色(例如，如果你想在这些颜色上写文本)。
