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

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


当前回答

这是我2021年的版本,带有还原功能和HSL颜色。

function getBackgroundColor(stringInput) {
    let stringUniqueHash = [...stringInput].reduce((acc, char) => {
        return char.charCodeAt(0) + ((acc << 5) - acc);
    }, 0);
    return `hsl(${stringUniqueHash % 360}, 95%, 35%)`;
}

其他回答

如果您的输入差异不足以让一个简单的哈希使用整个颜色光谱,您可以使用一个种子随机数生成器而不是哈希函数。

我用的是乔·弗里曼的答案中的颜色编码器,还有大卫·鲍的种子随机数生成器。

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;
}

使用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>

这个函数很有用。这是一个改编,相当长的执行这个repo ..

const color = (str) => {
    let rgb = [];
    // Changing non-hexadecimal characters to 0
    str = [...str].map(c => (/[0-9A-Fa-f]/g.test(c)) ? c : 0).join('');
    // Padding string with zeroes until it adds up to 3
    while (str.length % 3) str += '0';

    // Dividing string into 3 equally large arrays
    for (i = 0; i < str.length; i += str.length / 3)
        rgb.push(str.slice(i, i + str.length / 3));

    // Formatting a hex color from the first two letters of each portion
    return `#${rgb.map(string => string.slice(0, 2)).join('')}`;
}

我的代码是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;
    }

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

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

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

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