根据比例淡入十六进制颜色答案

【问题标题】：Fade in hex colour based on a scale根据比例淡入十六进制颜色
【发布时间】：2011-05-17 06:58:27
【问题描述】：

如何淡化十六进制颜色？基于 0 - 100 的等级。

假设我想要一个元素在 100 时为绿色，在 0 时为白色，所有阴影介于两者之间。

【问题讨论】：

【解决方案1】：

最简单的方法是在 CSS 中使用 rgb()。由于它接受原始整数，因此您可以简单地将 r 和 b 值的数字从史诗绿色的 0（g 为 255）更改为白色的 255。

【讨论】：

【解决方案2】：

好吧，因为屏幕颜色是“浅色”而不是“颜料”，所以没有所有颜色是黑色，而不是白色。因此，使用 CSS rgb 颜色而不是十六进制颜色从黑色变为绿色会更容易。

rgb(0,0,0) --> rgb(0,255,0)

要对白色做同样的事情，您需要从所有颜色开始，然后在刻度上去除蓝色和红色以留下纯绿色。

rgb(255,255,255) --> rgb(150,255,150) --> rgb(0,255,0)

然后只计算一个数字乘以你的比例（255/100 = 2.55）所以

如果我得分 75。

75 * 2.55 = 191 (rounded)

所以在白色到绿色的情况下，我会将颜色设置为

element.class {color:rgb(191,255,191); }

【讨论】：

【解决方案3】：

您应该使用 HSV 颜色坐标，并让色调 (H) 和值 (V) 固定，并将饱和度 (S) 从无（灰色，0）变为完全（绿色，1）。在 RGB 和 HSV 之间转换很容易。您可以使用Wikipedia 中的公式。

【讨论】：