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

javascript string hex colors

2022-08-30 01:13:30

我想创建一个函数，它将接受任何旧字符串（通常是单个单词），并从中以某种方式生成一个介于和之间的十六进制值，因此我可以将其用作HTML元素的颜色。#000000#FFFFFF

甚至可能是一个速记十六进制值（例如：），如果它不那么复杂的话。事实上，来自“网络安全”调色板的颜色将是理想的。#FFF

答案 1

以下是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（...）”-样式颜色代码。

答案 2

只需将任意字符串的计算十六进制颜色代码移植到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))