使用JavaScript基于字符串创建十六进制颜色

我想创建一个函数，它将接受任何旧字符串（通常是一个单词），并从中生成一个介于

#000000

和

#FFFFFF

之间的十六进制值，因此我可以将其用作HTML元素的颜色

---

如果不太复杂的话，甚至可能是一个简写的十六进制值（例如：

#FFF

）。事实上，“网络安全”调色板的颜色是理想的。

只需通过Java从移植到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;
}

---

这是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;
}

例如：

---

（另一种/更简单的解决方案可能涉及返回“rgb（…）”样式的颜色代码。）

如果您的输入差异不足以让一个简单的散列使用整个色谱，则可以使用种子随机数生成器，而不是散列函数

我用的是乔·弗里曼答案中的彩色编码器

函数StringToColor（str）{
数学随机（str）；
var rand=Math.random（）*Math.pow（255,3）；
Math.seedrandom（）；//不要在生成器中留下非随机种子
对于（var i=0，color=“#”i<3；color+=（“00”+（（rand>>i++*8）和0xFF）.toString（16））.slice（-2））；
返色；
}

另一种针对随机颜色的解决方案：

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;
}

函数着色（str）{
对于（var i=0，hash=0；i
另请参阅更多类似的替代方案


函数colorByHashCode（值）{
返回“+值+”；
}
String.prototype.getHashCode=函数（）{
var散列=0；
如果（this.length==0）返回哈希；
for（var i=0；i
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;
}

函数stringToColor（str）{
var散列=0；
对于（变量i=0；i
可以将字符串映射到如下颜色：

const color = Please.make_color({
    from_hash: "any string goes here"
});

例如，
“此处的任何字符串”
将返回为
“#47291b”


而
“另一个！”
返回为
“#1fc0c3d”
我发现生成随机颜色往往会产生不适合我口味的对比度。我发现最简单的方法就是预先填充一个非常不同的颜色列表。对于每个新字符串，在列表中指定下一种颜色：

// 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种颜色，但我发现大多数人在这之后都无法分辨出它们之间的区别。我想你可以添加更多的颜色

虽然这段代码使用硬编码的颜色，但至少可以保证您在开发过程中确切地知道在生产中看到的颜色之间的对比度

颜色列表已从中删除，还有其他具有更多颜色的列表。
我提出了一个解决方案，可以基于输入字符串生成美观的柔和颜色。它使用字符串的前两个字符作为随机种子，然后基于该种子生成R/G/B

它可以很容易地扩展，以便种子是字符串中所有字符的XOR，而不仅仅是前两个字符

受David Crow的回答启发：

要点如下：
此函数实现了这一点。它是对这一相当长的实现的改编

const color=（str）=>{
设rgb=[]；
//将非十六进制字符更改为0
str=[…str].map（c=>（/[0-9A-Fa-f]/g.test（c））？c:0）.join（“”）；
//用零填充字符串，直到其相加为3
而（str.length%3）str+='0'；
//将字符串分成3个同样大的数组
对于（i=0；istring.slice（0，2））.join（“”）}”；
}
使用
hashCode
就像克里斯蒂安·桑切斯用
hsl
和现代javascript回答的那样，你可以创建一个对比度很好的颜色选择器，如下所示：


函数hashCode（str）{
设hash=0；
对于（变量i=0；ihash=str.charCodeAt（i）+（hashi将其转换为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;
    }

public static int getColorFromText（字符串文本）
{
if（text==null | | text.length（）<1）
返回颜色：黑色；
int hash=0；
对于（int i=0；ihash=text.charAt（i）+（hash您真正需要的是一个好的hash函数

const crypto=require（'crypto'）；
函数strToColor（str）{
返回'#'+crypto.createHash（'md5'）.update（str.digest（'hex'）.substr（0,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%)`;
  }

getBackgroundColor（stringInput）{
让stringUniqueHash=[…stringInput].reduce（（acc，char）=>{
返回char.charCodeAt（0）+（（acc可以提供一些示例输入和/或类似问题的链接？不是答案，但您可能会发现以下内容很有用：要将十六进制转换为整数，请使用
parseInt（hexstr，10）
。要将整数转换为十六进制，请使用
n.toString（16）
，其中n是一个整数。@qw3n-示例输入：只是简单的旧文本字符串…如“医学”、“外科”、“神经病学”、“全科医学”等。范围在3到20个字符之间…找不到另一个字符，但这里有一个java问题：@Daniel-谢谢。我需要坐下来认真研究一下。可能有用。它需要填充十六进制字符串，例如：
（（此>>24）和0xFF）.toString（16））.slice（-2）+（（00+（（此>>16）和0xFF）.toString（16））.slice（-2）+
// 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");

//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 };
}

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('')}`;
}

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;
    }

 getBackgroundColor(stringInput) {
    let stringUniqueHash = [...stringInput].reduce((acc, char) => {
      return char.charCodeAt(0) + ((acc << 5) - acc);
    }, 0);
    return `hsl(${stringUniqueHash % 360}, 95%, 35%)`;
  }