我想创建一个函数，它将接受任何旧字符串(通常是一个单词)，并从中以某种方式生成一个十六进制值在#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伪随机函数，以及我自己的一些填充和数学。
我怀疑该函数产生均匀分布的颜色，尽管它看起来很好，并做了它应该做的事情。
其他回答
使用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 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;
}
还有一个随机颜色的解决方案:
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伪随机函数，以及我自己的一些填充和数学。
我怀疑该函数产生均匀分布的颜色，尽管它看起来很好，并做了它应该做的事情。
下面是我提出的一个解决方案，根据输入字符串生成美观的粉彩颜色。它使用字符串的前两个字符作为随机种子，然后基于该种子生成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
只是将Java从Compute的十六进制颜色代码任意字符串移植到Javascript:
function hashCode(str) { // java String#hashCode
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
return hash;
}
function intToRGB(i){
var c = (i & 0x00FFFFFF)
.toString(16)
.toUpperCase();
return "00000".substring(0, 6 - c.length) + c;
}
转换你会做:
intToRGB(hashCode(your_string))
