我想创建一个函数，它将接受任何旧字符串(通常是一个单词)，并从中以某种方式生成一个十六进制值在#000000和#FFFFFF之间，所以我可以使用它作为HTML元素的颜色。
如果不那么复杂的话，甚至可能是一个简化的十六进制值(例如:#FFF)。事实上，“网络安全”调色板中的颜色是最理想的。
当前回答
下面是另一个尝试:
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;
}
其他回答
我已经打开了一个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>
我想要类似丰富的HTML元素的颜色，我惊讶地发现CSS现在支持hsl()颜色，所以一个完整的解决方案如下:
另参见如何自动生成N“不同”的颜色?更多类似的选择。
编辑:根据@zei的版本更新(美式拼写)
var stringToColor = (string, saturation = 100, lightness = 75) => { let hash = 0; for (let i = 0; i < string.length; i++) { hash = string.charCodeAt(i) + ((hash << 5) - hash); hash = hash & hash; } return `hsl(${(hash % 360)}, ${saturation}%, ${lightness}%)`; } // For the sample on stackoverflow function colorByHashCode(value) { return "<span style='color:" + stringToColor(value) + "'>" + value + "</span>"; } document.body.innerHTML = [ "javascript", "is", "nice", ].map(colorByHashCode).join("<br/>"); span { font-size: 50px; font-weight: 800; }
在HSL中，它的色调，饱和度，亮度。所以色调在0-359之间会得到所有的颜色，饱和度是你想要的颜色的丰富程度，100%对我来说是合适的。而亮度决定了深度，50%是正常的，25%是深色，75%是粉彩。我有30%，因为它最适合我的配色方案。
我有一个情况，我想显示基于用户的用户名的背景，并显示用户名的第一个字母在顶部。 我使用爱的代码，它为我工作得很好
var stringToColour = function (str) {
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
var colour = '#';
for (var i = 0; i < 3; i++) {
var value = (hash >> (i * 8)) & 0xff;
colour += ('00' + value.toString(16)).substr(-2);
}
return colour;}
为了找到合适的颜色，你可以使用
function lightOrDark(color) {
// Check the format of the color, HEX or RGB?
if (color.match(/^rgb/)) {
// If HEX --> store the red, green, blue values in separate variables
color = color.match(
/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/,
);
var r = color[1];
var g = color[2];
var b = color[3];
} else {
// If RGB --> Convert it to HEX: http://gist.github.com/983661
color = +(
'0x' + color.slice(1).replace(color.length < 5 && /./g, '$&$&')
);
r = color >> 16;
g = (color >> 8) & 255;
b = color & 255;
}
// HSP equation from http://alienryderflex.com/hsp.html
var hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
// Using the HSP value, determine whether the color is light or dark
if (hsp > 127.5) {
return 'light';
} else {
return 'dark';
}
}
我在一行中将其转换为Python
import hashlib
hash = hashlib.sha1(b'user@email.com').hexdigest()
print("#" + hash[0:6])
