Javascript - 从字符串中获取RGB颜色
在HTML元素中，我希望获得类似的颜色丰富度，但我惊讶地发现CSS现在支持hsl()颜色，所以下面是一个完整的解决方案：
还可以参考How to automatically generate N "distinct" colors?以获取更多类似的替代方案。
编辑：根据's version（使用美式拼写）进行更新
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中，Hue代表色调，Saturation代表饱和度，Lightness代表亮度。因此，0-359之间的色调可以获得所有颜色，饱和度用于确定颜色的饱和度，100%对我来说效果很好。亮度决定了颜色的深浅，50%是正常的，25%是暗色，75%是淡色。我选择了30%，因为它最适合我的配色方案。
这是一个非常灵活的解决方案。
感谢分享一个可以决定颜色丰富度的解决方案！
感谢将其制作成代码片段！
这种方法对于给我的应用程序带来所需的活力/细腻非常有用。随机的十六进制色彩在大多数情况下饱和度和亮度变化太大，无法使用。感谢这个解决方案！
这个解决方案返回的颜色太少了，不能满足要求。
已经整理并转换成一个单独的独立函数jsfiddle.net/j9gymw0t/1
这与Cristian的解决方案存在相同的问题，其中哈希算法对于非常相似的输入产生非常相似的结果。
这是因为它使用了相同的哈希函数。可以随意更改哈希函数为其他内容，乘以一个大的质数和/或异或一个大的质数应该可以改变它的位置。但是，此示例旨在获得一系列360种类似色调的颜色，是的，会出现重复，谢谢。
问题：如何从字符串中获取RGB颜色？
原因：该问题的出现是因为需要从一个字符串中提取出对应的RGB颜色。
解决方法：
以下是一个返回6位颜色代码的函数：
const stringToColour = (str) => {
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函数定义 /* eslint-enable no-bitwise */
使用方法：
stringToColour("greenish");
// -> #9bc63b
示例：
此代码与NoSQL自动生成的ID非常适配，对于同一用户，颜色始终相同。
如果需要透明度的alpha通道在十六进制代码中，可以在颜色代码的末尾添加两个数字来表示alpha通道。具体可参考：gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
注意：在不同的浏览器或操作系统中，相同的字符串对应的颜色可能不同。例如，在Chrome+Windows和Chrome+Android中，"my e-mail"对应的颜色分别是蓝色和绿色。
感谢stackoverflow.com/a/64490863/403372提供了从字符串生成柔和/亮丽颜色的函数。
如果不想使用已弃用的.substr方法，可以使用以下代码替代：
colour += x.substring(x.length - 2);
另外，需要注意以下几点：
- 不应使用"var"，请使用"let"。
- 对于2023年以后的版本，substr方法已弃用。
- 位运算符在ESLint检查中会显示警告。
- 在JavaScript Stackoverflow的所有示例中，我们应该使用TypeScript。
以上就是关于从字符串中获取RGB颜色的问题的原因和解决方法。
在这个问题中，作者想要从一个字符串中获取RGB颜色值。他参考了一个Java的解决方案，并将其移植到了Javascript中。
作者首先定义了一个名为"hashCode"的函数，它的作用是计算字符串的哈希值。函数中使用了一个循环来遍历字符串的每个字符，并根据一定的算法计算出哈希值。最后，函数返回这个哈希值。
接下来，作者定义了一个名为"intToRGB"的函数，它的作用是将一个整数转换为RGB颜色值。函数中先将整数与0x00FFFFFF进行按位与运算，然后将结果转换为16进制字符串并转换为大写。最后，函数返回一个6位的RGB颜色值。
为了实现字符串到RGB颜色值的转换，作者使用了"intToRGB(hashCode(your_string))"的方式调用函数。
然而，函数中存在一个问题，即生成的RGB颜色值可能会缺少前导0。为了解决这个问题，作者提供了一段代码，使用了字符串的slice方法来在生成的颜色值前面添加0。
还有他在将音乐流派标签转换为背景颜色时遇到的问题。对于相似的字符串，生成的颜色值可能非常接近。为了解决这个问题，作者通过在最后的哈希值上进行乘法运算来增强差异性。
最后，作者提醒读者在返回的颜色值前添加"#"符号。
通过以上整理，我们可以得出这个问题的原因是作者想要从字符串中获取RGB颜色值，并遇到了前导0和颜色相似性的问题。解决方法是使用函数进行字符串哈希计算和RGB颜色值转换，并通过添加代码来解决前导0和颜色相似性的问题。