从红色到绿色的颜色渐变，没有黄色答案

【问题标题】：Color gradient from red to green without yellow从红色到绿色的颜色渐变，没有黄色
【发布时间】：2021-07-07 11:14:55
【问题描述】：

我有一些彩色文本来表示质量（红色 = 差，绿色 = 好）。

当质量为 50% 时，文本为黄色且几乎无法辨认。有什么办法可以让渐变从红色到绿色，中间没有黄色？

（质量可以是任何值，因此手动设置颜色不起作用。）

for(i=0;i<=100;i+=10) {
  $('body').append('<div style="color:' + color(i/100) + '">Quality ' + i + '</div>');
}

function color(quality) {
  var h = 355 + 125 * quality;
  var s = 130 - 60 * quality;
  var l = 60;
  return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

还有一个替代方法是这个函数，但它只是在中间返回一个难看的棕色：

for(i=0;i<=100;i+=10) {
  $('body').append('<div style="color:' + color(i/100) + '">Quality ' + i + '</div>');
}

function color(quality) {
  var r = 255 * (1 - quality);
  var g = 255 * quality;
  var b = 0;
  return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】：

我担心我要问的问题在物理上是不可能的 :D 但是其他人是如何解决这个问题的？当然，渐变红色->绿色并不少见..
可能的欺骗：Generate colors between red and green for an input range
你可以分成两个范围，然后你应该选择中间点。常见的是白色（而不是黄色）。您可以选择蓝色/紫色（但在这种情况下，请选择浅色）。
@Andreas 不，那篇文章中的答案是我的起点——红色->黄色->绿色的渐变。这导致 50% 的文本几乎难以辨认

标签： javascript colors

【解决方案1】：

我已经修改了我的函数以减小l-值，使其越接近 0.5（黄色）。显然，现在黄色有点浑浊，但总的来说我觉得这是一个很好的解决方案:)

for(i=0;i<=100;i+=10) {
  $('body').append('<div style="color:' + color(i/100) + '">Quality ' + i + '</div>');
}

function color(quality) {
  var h = 355 + 125 * quality;
  var s = 130 - 60 * quality;
  var l = 45 + Math.abs(0.5 - quality) * 30;
  return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

这是一种使用 hue-rotate 的可能方法，但它存在脏棕色问题。我包含它是因为它使用 css 过滤器而不是 css 颜色，这可能很有趣，因为它是一种不同的方法。常数1.2 是通过反复试验而不是计算得出的，因此可以根据口味进行调整。

for(i=0;i<=100;i+=10) {
  $('body').append('<div style="color:hsl(355, 130%, 60%); filter:hue-rotate(' + i * 1.2 + 'deg)">Quality ' + i + '</div>');
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：