从字符串生成颜色 - Javascript

在Web开发中，颜色是一个非常重要的元素。有时候我们需要动态地生成颜色，而不是使用硬编码的颜色值。Javascript可以非常方便地从字符串生成颜色。

生成RGB颜色

RGB颜色由红色、绿色和蓝色三种颜色组合而成。每种颜色的取值范围为0-255，可以使用下面的代码从字符串中生成RGB颜色：

function getRgbColorFromString(str) {
  const hashCode = function(s) {
    return s.split('').reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0);
  };
  
  const hexColor = "#" + Math.floor(Math.abs(Math.sin(hashCode(str)) * 16777215) % 16777215).toString(16);
  
  const rgb = hexColor.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
  
  return rgb ? [
    parseInt(rgb[1], 16),
    parseInt(rgb[2], 16),
    parseInt(rgb[3], 16)
  ].join() : null;
}

const colorStr = "hello world";
const rgbColor = getRgbColorFromString(colorStr);

console.log(rgbColor); // 输出：169,37,95

上面的代码生成了一个RGB颜色，它的取值范围分别为0-255。我们可以使用该RGB颜色来进行Web开发中的各种颜色操作。

生成HEX颜色

HEX颜色使用16进制表示，由红色、绿色和蓝色三种颜色组合而成。每种颜色的取值范围为00-FF，可以使用下面的代码从字符串中生成HEX颜色：

function getHexColorFromString(str) {
  const hashCode = function(s) {
    return s.split('').reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0);
  };
  
  return "#" + Math.floor(Math.abs(Math.sin(hashCode(str)) * 16777215) % 16777215).toString(16);
}

const colorStr = "hello world";
const hexColor = getHexColorFromString(colorStr);

console.log(hexColor); // 输出：a9255f

上面的代码生成了一个HEX颜色，它使用16进制表示。我们可以使用该HEX颜色来进行Web开发中的各种颜色操作。

总之，Javascript非常方便地从字符串生成颜色，可以让我们在Web开发中更加灵活地使用颜色。