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

Question

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

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

Answer 1

以下是 CD Sanchez 答案的改编版本，始终返回 6 位颜色代码：

const stringToColour = (str: string) => {
  let hash = 0;
  str.split('').forEach(char => {
    hash = char.charCodeAt(0) + ((hash << 5) - hash)
  })
  let colour = '#'
  for (let i = 0; i < 3; i++) {
    const value = (hash >> (i * 8)) & 0xff
    colour += value.toString(16).padStart(2, '0')
  }
  return colour
}

如果您使用 Eslint，则需要将此函数包装在

/* eslint-disable no-bitwise */
>> stringToColour func. definition here" <<
/* eslint-enable no-bitwise */

用法中：

stringToColour("greenish");
// -> #9bc63b

示例：

http://jsfiddle.net/sUK45/

（替代/更简单的解决方案可能涉及返回“rgb(...)”样式的颜色代码。）

Answer 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))

Answer 3

我希望 HTML 元素的颜色具有类似的丰富性，我惊讶地发现 CSS 现在支持 hsl() 颜色，因此我的完整解决方案如下：

另请参阅 如何自动生成 N 个“不同”颜色？ 以获得更多与此类似的替代方案。

编辑：根据 @zei 的版本 进行更新（采用美式拼写）

var stringToColor = (string, saturation = 100, lightness = 75) => {
  let hash = 0;
  for (let i = 0; i < string.length; i++) {
hash = string.charCodeAt(i) + ((hash << 5) - hash);
hash = hash & hash;
  }
  return `hsl(${(hash % 360)}, ${saturation}%, ${lightness}%)`;
}


// For the sample on stackoverflow
function colorByHashCode(value) {
return "<span style='color:" + stringToColor(value) + "'>" + value + "</span>";
}

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%，因为它最适合我的配色方案。

Answer 4

这是我的 2021 版本，带有“Reduce 函数”和“HSL 颜色”。

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

Answer 5

使用 Cristian Sanchez 的答案中的 hashCode 和现代 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>

Answer 6

我发现生成随机颜色往往会创建对比度不足以满足我口味的颜色。我发现解决这个问题的最简单方法是预先填充一个非常不同的颜色列表。对于每个新字符串，分配列表中的下一个颜色：

// 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 种颜色，但我发现大多数人无论如何都无法真正分辨出其中的区别。我想你总是可以添加更多颜色。

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

颜色列表已从这个答案中删除，还有其他包含更多颜色的列表。

Answer 7

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

我正在使用 Joe Freeman 的答案中的颜色编码器，以及 David Bau 的种子随机数生成器。

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

Answer 8

我已向 拉取请求。 com/Fooidge/PleaseJS" rel="nofollow noreferrer">Please.js 允许从哈希生成颜色。

您可以将字符串映射到颜色，如下所示：

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

例如，“此处任何字符串” 将返回为 “#47291b”
并且 "another!" 返回为 "#1f0c3d"

Answer 9

Javascript 解决方案受到 Aslam 解决方案的启发，但返回十六进制颜色代码的颜色

/**
 * 
 * @param {String} - stringInput - 'xyz'
 * @returns {String} - color in hex color code - '#ae6204'
 */
function getBackgroundColor(stringInput) {
    const h = [...stringInput].reduce((acc, char) => {
        return char.charCodeAt(0) + ((acc << 5) - acc);
    }, 0);
    const s = 95, l = 35 / 100;
    const a = s * Math.min(l, 1 - l) / 100;
    const f = n => {
        const k = (n + h / 30) % 12;
        const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
        return Math.round(255 * color).toString(16).padStart(2, '0');   // convert to Hex and prefix "0" if needed
    };
    return `#${f(0)}${f(8)}${f(4)}`;
}

Answer 10

随机颜色的另一个解决方案：

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 伪随机函数，以及来自的一些填充和数学我。

我怀疑这个函数会产生均匀分布的颜色，尽管它看起来不错并且做了它应该做的事情。

Answer 11

2024 版本 - 简单明了的 TypeScript 箭头函数，返回 HSL 颜色。

const stringToColor = (value: string) => {
  let hash = 0;
  for (let i = 0; i < value.length; i++) {
    hash = value.charCodeAt(i) + ((hash << 5) - hash);
  }

  return `hsl(${hash % 360}, 85%, 35%)`;
};

Answer 12

这是我想出的一个解决方案，用于根据输入字符串生成美观的柔和颜色。它使用字符串的前两个字符作为随机种子，然后根据该种子生成 R/G/B。

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

受到 David Crow 的回答的启发：随机生成美观的算法 -令人愉悦的调色板

//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 -锐利/49fd46a071a267d9e5dd

Answer 13

这是另一个尝试：

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

Answer 14

您真正需要的只是一个好的哈希函数。在节点上，我只是使用

const crypto = require('crypto');
function strToColor(str) {
    return '#' + crypto.createHash('md5').update(str).digest('hex').substr(0, 6);
}

Answer 15

在查看了相当代码密集且相当旧的答案之后，我想我会从 2021 年的角度回顾这个问题只是为了好玩，希望它对任何人都有用。如今，HSL 颜色模型和加密 API 在几乎所有浏览器（当然 IE 除外）中实现，问题可以这么简单地解决：

async function getColor(text, minLightness = 40, maxLightness = 80, minSaturation = 30, maxSaturation = 100) {
  let hash = await window.crypto.subtle.digest("SHA-1", new TextEncoder().encode(text));
  hash = new Uint8Array(hash).join("").slice(16);

  return "hsl(" + (hash % 360) + ", " + (hash % (maxSaturation - minSaturation) + minSaturation) + "%, " + (hash % (maxLightness - minLightness) + minLightness) + "%)";
}

function generateColor() {
  getColor(document.getElementById("text-input").value).then(color => document.querySelector(".swatch").style.backgroundColor = color);
}

input {
  padding: 5px;
}

.swatch {
  margin-left: 10px;
  width: 28px;
  height: 28px;
  background-color: white;
  border: 1px solid gray;
}

.flex {
  display: flex;
}

<html>

<body>
  <div class="flex">
    <form>
      <input id="text-input" type="text" onInput="generateColor()" placeholder="Type here"></input>
    </form>
    <div class="swatch"></div>
  </div>
</body>

</html>

这应该比手动生成哈希要快得多，并且还提供了一种定义饱和度和亮度的方法，以防您不希望颜色太平或太亮或太暗（例如，如果您想在这些颜色上写入文本） 。

Answer 16

我有一种情况，我想根据用户的用户名显示背景，并在顶部显示用户名的第一个字母。
我使用了亲爱的代码，它对我来说效果很好

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

找到可以使用的合适颜色

function lightOrDark(color) {
// Check the format of the color, HEX or RGB?
if (color.match(/^rgb/)) {
  // If HEX --> store the red, green, blue values in separate variables
  color = color.match(
    /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/,
  );

  var r = color[1];
  var g = color[2];
  var b = color[3];
} else {
  // If RGB --> Convert it to HEX: http://gist.github.com/983661
  color = +(
    '0x' + color.slice(1).replace(color.length < 5 && /./g, '
amp;
amp;')
  );

  r = color >> 16;
  g = (color >> 8) & 255;
  b = color & 255;
}

// HSP equation from http://alienryderflex.com/hsp.html
var hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));

// Using the HSP value, determine whether the color is light or dark
if (hsp > 127.5) {
  return 'light';
} else {
  return 'dark';
}

}

Answer 17

这个函数就可以达到目的。这是对此的改编，相当长的实现此存储库 ..

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

Answer 18

我的代码是针对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;
    }

Answer 19

我将其转换为 Python 的一行

import hashlib

hash = hashlib.sha1(b'[email protected]').hexdigest()

print("#" + hash[0:6])