Question

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

当质量为 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 + '%)';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

另一种方法是这个函数，但它只是在中间返回一个丑陋的棕色：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

这是一种使用色调旋转的可能方法，但它具有脏棕色问题。我包含它是因为它使用 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>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

我修改了我的函数以减小 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 + '%)';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

2 个答案: