使用JavaScript创build基于string的hex颜色
我想创build一个接受任何旧string（通常是一个单词）的函数，并以某种方式在#000000和#FFFFFF之间生成一个hex值，因此我可以将它用作HTML元素的颜色。
如果不那么复杂的话，甚至可能是一个简写hex值（例如： #FFF ）。 事实上，来自“网页安全”调色板的颜色将是理想的。
只需将Computehex颜色代码中的Java从任意string移植到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))
这是一个CD桑切斯的答案，一贯返回一个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
例：
（另一个/更简单的解决scheme可能涉及返回'rgb（…）'样式的颜色代码。）
我想要HTML元素的颜色类似的丰富性，我很惊讶地发现CSS现在支持hsl（）的颜色，所以下面是一个完整的解决scheme：
另请参阅如何自动生成N个“不同的”颜色？ 为更多的select更类似于这个。
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%)"; };
HSL的色调，饱和度，亮度。 所以0到359之间的色调会得到所有的颜色，饱和度是你想要的颜色多么丰富，100％适合我。 而明度决定深度，50％是正常的，25％是深色，75％是粉彩。 我有30％，因为它最适合我的配色scheme。
如果您的input对于简单哈希来说使用整个色谱来说不够差，则可以使用种子随机数生成器而不是哈希函数。
我使用乔·弗里曼的答案和大卫·鲍的种子随机数发生器的颜色编码器 。
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; }
我只是在Please.js中构build了一个适合账单的function，它仍然没有与主要的仓库合并，但您可以在这里看到：
https://github.com/ibarrajo/PleaseJS
您可以将string映射到如下所示的颜色：
var color = Please.make_color({from_hash: 'any string goes here'});
"any string goes here"将返回为"#47291b"
和"another!" 返回为"#1f0c3d"
我发现生成随机的颜色往往会产生对我的口味没有足够对比度的颜色。 我发现解决这个问题的最简单的方法是预先填充一个非常不同的颜色列表。 对于每个新的string，分配列表中的下一个颜色：
// 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种颜色的限制，我发现无论如何，大多数人不能真正分辨出差异。 我想你总是可以添加更多的颜色。
虽然此代码使用硬编码的颜色，但您至less可以保证在开发过程中知道在生产中颜色之间会看到多less对比。
颜色列表已经从这个答案中解除，还有其他列表更多的颜色。
另一种随机颜色的解决scheme：
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伪随机函数，以及来自我自己的一些填充和math。
我怀疑函数产生均匀分布的颜色，虽然它看起来不错，做它应该做的。
这里有一个解决scheme，我想出了一个基于inputstring生成美观的柔和的颜色。 它使用string的前两个字符作为随机种子，然后基于该种子生成R / G / B。
它可以很容易地扩展，以便种子是string中所有字符的异或，而不仅仅是前两个字符。
受David Crow的答案的启发： algorithm随机生成一个美观的调色板
//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
这是另一个尝试：
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; }
