我想创建一个函数，该函数将接受任何旧字符串（通常是一个单词），并从中以某种方式在#000000和之间生成一个十六进制值#FFFFFF，因此我可以将其用作 HTML 元素的颜色。
#FFF如果不那么复杂，甚至可能是速记十六进制值（例如：）。事实上，来自“网络安全”调色板的颜色将是理想的。
使用 JavaScript 创建基于字符串的十六进制颜色
IT技术
javascript
string
colors
hex
2021-03-06 11:12:51
6个回答
这是 CD Sanchez 回答的改编版，它始终返回 6 位颜色代码：
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;
}
用法：
stringToColour("greenish");
// -> #9bc63b
例子：
（另一种/更简单的解决方案可能涉及返回“rgb(...)”样式的颜色代码。）
只需将 Java 从任意字符串的 Compute hex color code移植到 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))
我想为 HTML 元素提供类似的丰富颜色，我惊讶地发现 CSS 现在支持 hsl() 颜色，所以我的完整解决方案如下：
另请参阅如何自动生成 N 个“不同”颜色？更多与此类似的替代方案。
function colorByHashCode(value) {
return "<span style='color:" + value.getHashCode().intToHSL() + "'>" + value + "</span>";
}
String.prototype.getHashCode = function() {
var hash = 0;
if (this.length == 0) return hash;
for (var i = 0; i < this.length; i++) {
hash = this.charCodeAt(i) + ((hash << 5) - hash);
hash = hash & hash; // Convert to 32bit integer
}
return hash;
};
Number.prototype.intToHSL = function() {
var shortened = this % 360;
return "hsl(" + shortened + ",100%,30%)";
};
document.body.innerHTML = [
"javascript",
"is",
"nice",
].map(colorByHashCode).join("<br/>");span {
font-size: 50px;
font-weight: 800;
}在 HSL 中，它的色相、饱和度、亮度。因此，0-359 之间的色调将获得所有颜色，饱和度是您想要颜色的丰富程度，100% 适合我。而Lightness决定了深度，50%是正常色，25%是深色，75%是粉彩。我有 30%，因为它最适合我的配色方案。
这是我的 2021 版本，带有 Reduce Function 和 HSL Color。
function getBackgroundColor(stringInput) {
let stringUniqueHash = [...stringInput].reduce((acc, char) => {
return char.charCodeAt(0) + ((acc << 5) - acc);
}, 0);
return `hsl(${stringUniqueHash % 360}, 95%, 35%)`;
}
使用hashCodeCristian Sanchez 的答案hsl和现代 javascript，您可以创建一个具有良好对比度的颜色选择器，如下所示：
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) {
return `hsl(${hashCode(str) % 360}, 100%, 80%)`;
}
one.style.backgroundColor = pickColor(one.innerText)
two.style.backgroundColor = pickColor(two.innerText)div {
padding: 10px;
}<div id="one">One</div>
<div id="two">Two</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>其它你可能感兴趣的问题