我想创建一个接受任何旧字符串的函数（通常是一个单词），然后从以某种方式生成#000000和#FFFFFF之间的十六进制值，所以我可以将它用作HTML元素的颜色。
如果不那么复杂，甚至可能是简写十六进制值（例如：#FFF）。事实上，来自“网页安全”调色板的颜色是理想的。
答案 0 :(得分：150)
这是对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（...）'样式的颜色代码。）
答案 1 :(得分：127)
只需将Java从Compute hex color code for an arbitrary 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))
答案 2 :(得分：36)
我想要HTML元素的颜色类似丰富，我很惊讶地发现CSS现在支持hsl（）颜色，所以我的完整解决方案如下：
另请参阅How to automatically generate N "distinct" colors?了解更多类似的替代方案。
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％适合我。而亮度决定了深度，50％是正常的，25％是深色，75％是柔和的。我有30％，因为它最适合我的配色方案。
答案 3 :(得分：8)
我发现生成随机颜色往往会产生对我的口味没有足够对比度的颜色。我发现最容易解决的方法是预先填充一个非常不同颜色的列表。对于每个 new 字符串，指定列表中的下一个颜色：
// 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种颜色，但我发现大多数人无论如何都无法真正区分它们。我想你总能添加更多颜色。
虽然此代码使用硬编码颜色，但您至少可以保证在开发过程中确切了解生产中颜色之间的对比度。
颜色列表已从this SO answer解除，还有其他颜色更多的列表。
答案 4 :(得分：6)
这是我的 2021 版本，带有 Reduce 函数和 HSL 颜色。
getBackgroundColor(stringInput) {
let stringUniqueHash = [...stringInput].reduce((acc, char) => {
return char.charCodeAt(0) + ((acc << 5) - acc);
}, 0);
return `hsl(${stringUniqueHash % 360}, 95%, 35%)`;
}
答案 5 :(得分：5)
如果输入的差异不足以使简单哈希使用整个色谱，则可以使用种子随机数生成器而不是散列函数。
我正在使用Joe Freeman的答案中的颜色编码器和David Bau's seeded random number generator。
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;
}
答案 6 :(得分：5)
我已将a pull request打开到Please.js，允许从哈希生成颜色。
您可以将字符串映射为如下颜色：
const color = Please.make_color({
from_hash: "any string goes here"
});
例如，"any string goes here"将返回"#47291b"
并"another!"返回"#1f0c3d"
答案 7 :(得分：4)
另一种随机颜色的解决方案：
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函数（也是这个帖子中的答案）和来自here的Asykäri伪随机函数以及我自己的一些填充和数学。
我怀疑这个函数会产生均匀分布的颜色，虽然它看起来不错但是应该做什么。
答案 8 :(得分：4)
这是我想出的一个基于输入字符串生成美学上令人愉悦的柔和色彩的解决方案。它使用字符串的前两个字符作为随机种子，然后根据该种子生成R / G / B.
它可以很容易地扩展，以便种子是字符串中所有字符的XOR，而不仅仅是前两个字符。
灵感来自David Crow的回答：Algorithm to randomly generate an aesthetically-pleasing color palette
//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
答案 9 :(得分：2)
使用hashCode和Cristian 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>
答案 10 :(得分：1)
这是另一个尝试：
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;
}
答案 11 :(得分：1)
您真正需要的只是一个好的哈希函数。在节点上，我只使用
const crypto = require('crypto');
function strToColor(str) {
return '#' + crypto.createHash('md5').update(str).digest('hex').substr(0, 6);
}
答案 12 :(得分：0)
这个功能可以解决问题。它适用于这个相当长的实现this 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('')}`;
}
答案 13 :(得分：0)
我将其转换为Java。
所有人的坦克。
public static int getColorFromText(String text)
{
if(text == null || text.length() < 1)
return Color.BLACK;
int hash = 0;
for (int i = 0; i < text.length(); i++)
{
hash = text.charAt(i) + ((hash << 5) - hash);
}
int c = (hash & 0x00FFFFFF);
c = c - 16777216;
return c;
}