javascript - 确定规则：将整数值与颜色#RGB 相关联

Question

我想根据整数 X（正票数）确定背景颜色 C

好的，我可以

if(x==0) c = '#000';
else if(x > 0 && x < 5 ) c = '#001'
else if(X<=5 <= 20) c = '#002';
//and so on...

但是，我怎样才能做到这一点以使其渐进？我的意思是从 0 到 500 票 -> 500 色调的蓝色？（如果我没记错的话，它可能是十六进制的两位数（如果不是，15*15 xD））

有任何想法吗？

Answer 1

由于您只是在寻找想法，因此这是其他人不会建议的想法。首先，去查找“Catmull-Rom Spline”公式。它归结为一个非常简单的矩阵乘法技巧，它为您提供了一个公式，用于在给定一组控制点的情况下计算曲线。

好的，既然您已经了解了 Catmull-Rom 样条曲线，您可以编写一些代码来在 3 空间中绘制曲线。那么，如果不是 3 维空间，那么 RGB 是什么？因此，您选择了一些好的颜色控制点（RGB 颜色），然后使用您方便的 Catmull-Rom 实现通过所有这些颜色生成参数曲线，曲线上的颜色随心所欲。

颜色渐变最酷的地方在于它们在过渡过程中非常“平滑”。

Answer 2

我可能会使用类似的东西：

var blueness = x / 2;
if (blueness > 255) blueness = 255;
rgb(0, 0, blueness);

但是您可以使用这个 sprintf 实现并像使用任何其他语言一样使用它来转换为十六进制。

Answer 3

在您的页面上包含 raphaeljs 并将函数粘贴到您的代码中的某个estimateColorForValue()位置。计算某个值的颜色，通过查看范围内的位置来插值颜色。在范围内：橙色-棕色、绿色、粉红色以及介于两者之间的更多颜色。色调的微小变化会极大地改变视觉颜色。toHex()estimateColorForValue(hue, value, darkestValue, brightestValue)[darkestValue-brightestValue] valuehue[0-1]0.10.40.8

例如：estimateColorForValue(.1, 15, 1, 20), 可以解释为，对于范围为 1 到 20 的数据，在橙色空间中计算值 15 的颜色。

toHex(estimateColorForValue(.1, 15, 1, 20)) ==> "#cf8415"

代码：

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>

<script>

function toHex(hsb) {
  return Raphael.hsb2rgb(hsb.h, hsb.s, hsb.b).hex;
}

function estimateColorForValue(hue, value, darkestValue, brightestValue) {
  // Constants to determine saturation and brightness
  var darkBrightness = 0.6;
  var brightBrightness = 1;
  var darkSaturation = 0.3;
  var brightSaturation = 1;

  // Compute saturation and brightness:
  var gradient = (value - darkestValue) / (brightestValue - darkestValue);
  var saturation = darkSaturation + gradient * (brightSaturation - darkSaturation);
  var brightness = darkBrightness + gradient * (brightBrightness - darkBrightness);

  return {h: hue, s:saturation, b:brightness};
}
</script>