我想创建一个函数，它将接受任何旧字符串(通常是一个单词)，并从中以某种方式生成一个十六进制值在#000000和#FFFFFF之间，所以我可以使用它作为HTML元素的颜色。
如果不那么复杂的话，甚至可能是一个简化的十六进制值(例如:#FFF)。事实上，“网络安全”调色板中的颜色是最理想的。
当前回答
以下是对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
例子:
http://jsfiddle.net/sUK45/
(另一种/更简单的解决方案可能涉及返回'rgb(…)'风格的颜色代码。)
其他回答
只是将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))
这个函数很有用。这是一个改编，相当长的执行这个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('')}`;
}
你真正需要的是一个好的哈希函数。在节点上，我只用
const crypto = require('crypto');
function strToColor(str) {
return '#' + crypto.createHash('md5').update(str).digest('hex').substr(0, 6);
}
Javascript解决方案受到Aslam的解决方案的启发，但返回十六进制颜色代码的颜色
/**
*
* @param {String} - stringInput - 'xyz'
* @returns {String} - color in hex color code - '#ae6204'
*/
function getBackgroundColor(stringInput) {
const h = [...stringInput].reduce((acc, char) => {
return char.charCodeAt(0) + ((acc << 5) - acc);
}, 0);
const s = 95, l = 35 / 100;
const a = s * Math.min(l, 1 - l) / 100;
const f = n => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color).toString(16).padStart(2, '0'); // convert to Hex and prefix "0" if needed
};
return `#${f(0)}${f(8)}${f(4)}`;
}
我想要类似丰富的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%，因为它最适合我的配色方案。
