我想创建一个接受任何旧字符串的函数(通常是一个单词),并从中以某种方式在#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))
我想要HTML元素的颜色类似丰富,我很惊讶地发现CSS现在支持hsl()颜色,所以我的完整解决方案如下:
另请参阅如何自动生成N"不同"颜色？更多类似的替代品.
function colorByHashCode(value) {
return "" + value + "";
}
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("
");span {
font-size: 50px;
font-weight: 800;
}我发现生成随机颜色往往会产生对我的口味没有足够对比度的颜色.我发现最容易解决的方法是预先填充一个非常不同颜色的列表.对于每个新字符串,指定列表中的下一个颜色:
// Takes any string and converts it into a #RRGGBB color.
var StringToColor = (function(){
var instance = null;
return {
next: function stringToColor(str) {
if(instance === null) {
instance = {};
instance.stringToColorHash = {};
instance.nextVeryDifferntColorIdx = 0;
instance.veryDifferentColors = ["#000000","#00FF00","#0000FF","#FF0000","#01FFFE","#FFA6FE","#FFDB66","#006401","#010067","#95003A","#007DB5","#FF00F6","#FFEEE8","#774D00","#90FB92","#0076FF","#D5FF00","#FF937E","#6A826C","#FF029D","#FE8900","#7A4782","#7E2DD2","#85A900","#FF0056","#A42400","#00AE7E","#683D3B","#BDC6FF","#263400","#BDD393","#00B917","#9E008E","#001544","#C28C9F","#FF74A3","#01D0FF","#004754","#E56FFE","#788231","#0E4CA1","#91D0CB","#BE9970","#968AE8","#BB8800","#43002C","#DEFF74","#00FFC6","#FFE502","#620E00","#008F9C","#98FF52","#7544B1","#B500FF","#00FF78","#FF6E41","#005F39","#6B6882","#5FAD4E","#A75740","#A5FFD2","#FFB167","#009BFF","#E85EBE"];
}
if(!instance.stringToColorHash[str])
instance.stringToColorHash[str] = instance.veryDifferentColors[instance.nextVeryDifferntColorIdx++];
return instance.stringToColorHash[str];
}
}
})();
// Get a new color for each string
StringToColor.next("get first color");
StringToColor.next("get second color");
// Will return the same color as the first time
StringToColor.next("get first color");
虽然这只有64种颜色的限制,但我发现大多数人无论如何都无法真正区分它们.我想你总能添加更多颜色.
虽然此代码使用硬编码颜色,但您至少可以保证在开发过程中确切知道您将在生产中的颜色之间看到多少对比度.
颜色列表已经从这个SO答案解除,还有其他列表有更多的颜色.
我已经向Please.js打开了一个pull请求,允许从哈希生成颜色.
您可以将字符串映射到这样的颜色:
const color = Please.make_color({
from_hash: "any string goes here"
});
例如,"any string goes here"将返回as "#47291b"
并"another!"返回as"#1f0c3d"
如果输入的差异不足以使简单的哈希使用整个色谱，则可以使用种子随机数生成器代替哈希函数。
我正在使用乔·弗里曼（Joe Freeman）的答案中的颜色编码器，以及大卫·鲍（David Bau）的种子随机数生成器。
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;
}
随机颜色的另一种解决方案：
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 Hash函数（也是该线程的答案）和Asykäri伪随机函数，并从我自己那里使用了一些填充和数学。
我怀疑该功能会产生均匀分布的颜色，尽管它看起来不错并且可以做到。
京公网安备 11010802040832号 | 京ICP备19059560号-6 