将随机字符串转换为十六进制颜色

Converting a random string into a hex colour

本文关键字：十六进制 颜色 转换 随机 字符串      更新时间：2023-09-26

我的应用程序中有一个操作日志表。我想根据该条目的sessionID为行分配一种随机颜色，以帮助查看模式/分组操作。

到目前为止，我有这个：

console.log(stringToColorCode('mj3bPTCbIAVoNr93me1I'));
function stringToColorCode(str) {
    return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
}

然而，我需要将Math.random（）替换为字符串整数，有没有任何技术可以将字符串转换为与随机字符串保持一致的随机数？

根据请求，将其作为awswer 发布

var stringHexNumber = (                       // 1
    parseInt(                                 // 2
        parseInt('mj3bPTCbIAVoNr93me1I', 36)  // 3
            .toExponential()                  // 4
            .slice(2,-5)                      // 5
    , 10) & 0xFFFFFF                          // 6
).toString(16).toUpperCase(); // "32EF01"     // 7

那么，发生了什么事？

  1. 事情从第3行开始，'mj3bPTCbIAVoNr93me1I'被转换为整数，比如x，通过将其解释为以36为基数的数字
  2. 接下来，x被放入它的指数形式，作为4线上的String。这是因为有了这么多字符，x可以是巨大的，这个例子是关于8e30的，所以将其转换为一种非常标准的形式
  3. 之后，第5行去掉了开头和结尾，所以只剩下数字，例如'8.123e+30'.slice(2, -5)变成了'12'
  4. 现在我们回到第2行，在那里它再次被转换回整数，这次是以10为基数
  5. 然后，行6使用快速位AND将该数字截断到范围0..16777215 (=== 0xFFFFFF)。这也将把NaN转换为0
  6. 最后，第7行通过在16中写入数字并更改大小写，将其转换回我们习惯于在中看到颜色的大写十六进制格式

如果你想使用这个，你可能还想确保最后的数字是6数字，并在前面粘贴一个#，这可以通过完成

'#' + ('000000' + stringHexNumber).slice(-6); // "#32EF01"

var color_codes = {};
function stringToColorCode(str) {
    return (str in color_codes) ? color_codes[str] : (color_codes[str] = '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6));
}

甜蜜的问题。我所做的是创建一个全局变量，这样你就可以一致地为给定的输入字符串获得相同的颜色。一旦调用了stringToColorCode，它将只为该字符串生成一个随机颜色Once。您可以依赖它来保持一致，这样，如果使用相同的字符串背靠背调用函数，它将返回相同的随机颜色。我看到的唯一缺陷是，两个不同的字符串可能（但不太可能）被映射到相同的颜色，但如果必要的话，这可以解决。

编辑：当我第一次回答时，我没有意识到@Nirk实际上有同样的答案。为了使这个更加独特，使用它可以在页面重新加载时为您提供一致的颜色。

console.log(stringToColorCode('mj3bPTCbIAVoNr93me1I'));
function stringToColorCode(str) {
    var sessionStoreKey = "myStringColors" + str;
    if (!sessionStorage[sessionStoreKey ]) {
        sessionStorage[sessionStoreKey] = Math.random()*0xFFFFFF<<0;       
    }
    var randomColor = sessionStorage[sessionStoreKey];
    return '#'+ randomColor;
}

我在backingbean上解决了这个问题。这在Java中对我有效：

private void createDefaultColorFromName(final String name) {
    String md5 = "#" + md5(name).substring(0, 6);
    defaultColor = Color.decode(md5);
    int darkness = ((defaultColor.getRed() * 299) + (defaultColor.getGreen() * 587) + (defaultColor.getBlue() * 114)) / 1000;
    if (darkness > 125) {
        defaultColor = defaultColor.darker();
    }
}

我为白色背景使生成的颜色稍微暗一点。。。

相关文章：