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

【问题标题】：Determining a rule: relate integer value to color #RGB确定规则：将整数值与颜色#RGB 相关联
【发布时间】：2011-04-01 23:48:23
【问题描述】：

我想根据整数 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））

有什么想法吗？

【问题讨论】：

标签： javascript css colors int relate

【解决方案1】：

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

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

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

【讨论】：

感谢您的支持 - 老实说，这比听起来容易得多，尤其是。如果你还记得一点高中代数。我真的很愚蠢，在过去的 20 年里，我已经实施并重新实施了十几次。
哦，如果不清楚：“整数”将映射到公式中的参数系数（“t”）。换句话说，该值“沿曲线移动”，可以这么说。控制点以四个为一组，因此您一次通过四个控制点生成点。
非常非常准确！我去看看；）
好的。实际上，我在 github（Mandelbrot 集程序）上有一些使用此技巧的旧代码，但在该 hack 之外使用它可能太可怕了 :-) 如果我能找到它，我会在此处添加 URL。编辑 here it is
请注意，如果您在不同的色彩空间（如 HSL）中进行插值，您可能会得到更好的结果。

【解决方案2】：

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

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

但您可以使用 this sprintf implementation 并像使用任何其他语言一样使用它来转换为十六进制。

【讨论】：

【解决方案3】：

在您的页面上包含 raphaeljs 并将函数 estimateColorForValue() 和 toHex() 粘贴到代码中的某处。 estimateColorForValue(hue, value, darkestValue, brightestValue) 计算某个值的颜色，通过查看 [darkestValue-brightestValue] value 范围内的位置来插值颜色。 hue 在[0-1] 范围内：0.1 代表橙色棕色，0.4 代表绿色，0.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>

【讨论】：