JS 和画布的 HSL 颜色逻辑

Question

我正在使用spectrogram，它在我的 ctx 中运行良好。

我使用的所有颜色都是 css filter: hue-rotate(160);

谁能解释一下他是如何为频谱图中的波形或能量图建议颜色的，以及背景是如何决定的？

我是指背景颜色和能量图的颜色？

我尝试随机更改值，但它似乎破坏了频谱图。 显然我不明白颜色是如何产生的？我所能做的就是对画布使用通用过滤器。

如果我能控制背景颜色和能量图颜色就好了。

JS line on Git

getFullColor(value) {
    var fromH = 62;
    var toH = 0;
    var percent = value / 255;
    var delta = percent * (toH - fromH);
    var hue = fromH + delta;
    return 'hsl(H, 100%, 50%)'.replace(/H/g, hue);
  }

谢谢 :)

编辑：从 js 中添加了相关的颜色部分。

Answer 1

HSL 颜色模型使用三个组件来组成颜色 - 色相、饱和度和亮度。在代码中饱和度被硬编码为 100%，这意味着颜色将是最饱和的；随着您减小该值，它将更多地过渡到灰度。亮度调节灰度值（从黑色到白色），50% 的设置正好在全黑和全白之间。色调代表“颜色”本身，即红色、蓝色、紫色等。通过对颜色应用不同的饱和度和亮度，我们可以创建不同版本的颜色（深红色、浅红色等）。

HSL 模型可以可视化为一个圆柱体，其中亮度映射到它的高度，饱和度映射到半径，颜色（或色调）分布在从 0 到 360 度的圆周围。

要选择颜色，您需要一个介于 0 到 360 之间的值。颜色的顺序定义明确。在 0 度是纯红色，当你增加值并绕着圆圈走时，你会得到橙色、黄色、绿色等。在 360 度时，您会恢复为红色。

最后，回到代码，色调是唯一要计算的东西，它将定义最终的颜色。库作者定义了两个变量fromH = 62和toH = 0，它基本上告诉了色调圆的哪个扇区将是最终颜色的来源。

然后库作者将频率值（0-255）转换为0到62之间的色调值。较低的频率值将导致接近62度的色调值（黄橙色），较高的频率值将更接近色调值为 0（更接近纯红色）。

if (value == 0)   hue = 62;
if (value == 100) hue = 37.6;
if (value == 255) hue = 0;

如果您想更改绘图的颜色（色调），您应该调整变量fromH 和toH 以选择具有所需颜色范围的圆扇区。

^{图片归功于https://science.wikia.org/ru/wiki/HSL_%D0%B8_HSV_(%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5_%D0%BC%D0%BE%D0%B4%D0%B5%D0%BB%D0%B8)。}

---

更新：

可以修改原始函数以允许更改饱和度和亮度范围。您在 HSL 中针对 #2a2c2d 的背景是 hls(200°, 3%, 17%)。如果您想以颜色为基础，可以调整饱和度和亮度范围。

getFullColor: function(value) {
  var fromH = 200;
  var toH = 200;

  var fromS = 10;
  var toS = 50;

  var fromL = 20;
  var toL = 50;

  var percent = value / 255;

  var hue = fromH + percent * (toH - fromH);
  var saturation = fromS + percent * (toS - fromS);
  var lightness = fromL + percent * (toL - fromL);

  return 'hsl(H, S%, L%)'
    .replace(/H/, hue)
    .replace(/S/, saturation)
    .replace(/L/, lightness);
}

你可以用谷歌搜索你的颜色“#2a2c2d”，你会看到一个谷歌搜索颜色选择器。它也显示一个 HSL 值。通过移动颜色选择器，您可以找到最大值所需的颜色并查看它的 HLS 值。

基本上“#2a2c2d”是您的背景颜色，它由fromXXX 变量组成。剩下的就是为最大频率值找到最亮的颜色，它的组件应该设置为toXXX 变量。该功能将为您提供两种颜色之间的平滑过渡。