在 PHP/jQuery 中从十六进制代码或 RGB 生成渐变？答案

【问题标题】：Generating gradients from a hexcode or RGB in PHP/jQuery?在 PHP/jQuery 中从十六进制代码或 RGB 生成渐变？
【发布时间】：2011-03-23 16:16:57
【问题描述】：

我试图弄清楚如何编写一个函数，以编程方式检索背景色 css 属性并创建两个输出（一个比背景色稍暗，一个比背景色稍亮）。

这个想法是能够从单一颜色选择中生成一个非常基本的线性渐变。

有人有什么想法吗？

【问题讨论】：

不是这个问题的答案，但也许您可以使用带有 alpha 混合的 PNG 图像来覆盖单一颜色，从而将外观更改为渐变。

标签： php javascript jquery hex rgb

【解决方案1】：

要正确缩放颜色，您必须将每个 RGB 值乘以一个比例。 E.g.，如果你的颜色是#00417b，并且你想要一种颜色比亮 125% 的颜色，那么你必须这样做：

var dark = {r: 0, g: 65, b: 123};
var light = {r: Math.round(Math.min(dark[r]*1.25, 255)),
             g: Math.round(Math.min(dark[g]*1.25, 255)),
             b: Math.round(Math.min(dark[b]*1.25, 255))};

自己比较一下结果：深色是#00417b，浅色是#00519A，尽管将它们描述为rgb(0, 65, 123) 和rgb(0, 81, 154) 是完全有效的CSS，而且可能也更容易。通过以这种方式缩放颜色，它们看起来处于相同的饱和度，这是简单地添加或减去数字无法实现的。

请注意，由于值被限制在 [0, 255]，如果您不断变换颜色，然后将它们反馈到此过程中，您可能会破坏有关源颜色中红色、绿色和蓝色比例的信息。因此，请保留原始颜色并尝试每次都将其用作您的输入。

由于您的问题专门询问了渐变，这就是您在两个颜色值之间切换的方式：

// Suppose you have a container which is X pixels high and you want to insert a 1-pixel tall
// element at each pixel, going vertically

var min = Math.min;
var max = Math.max;
var round = Math.round;

function get_color_for_height(startColor, endColor, height, row) {
  var scale = row/height;
  var r = startColor[red] + scale*(endColor[red] - startColor[red]);
  var b = startColor[blue] + scale*(endColor[blue] - startColor[blue]);
  var g = startColor[green] + scale*(endColor[green] - startColor[green]);

  return {
    r: round(min(255, max(0, r))),
    g: round(min(255, max(0, g))),
    b: round(min(255, max(0, b)))
  }
}


// some psuedo-code using an imaginary framework
for(var h = 0; h < height; h++) {
  var div = new Element('div');
  div.height = 1;
  div.backgroundColor = get_color_for_height(start, end, height, h);
  container.insert('top', div);
}

【讨论】：

我首先怀疑这会保持饱和度，但根据this article，S = 1 - (3 * min(R,G,B))/(R+G+B)，所以看起来确实如此。 +1
我要补充一点，不过保留色调会更有趣。
谢谢，非常彻底的回答。
我相信这种方法可以保留色调和饱和度，并调整值。我认为，调整值是大多数人看到渐变时的想法。
@Jesse 不，它不会保留色调。检查the equations。

【解决方案2】：

要生成更深或更浅的变体，一种简单的可能性是对所有三个组件添加或减去一个固定数字，将其上限为 0 和 255/0xFF。

【讨论】：

感谢您的评论，我会试试这个
如果您使用此方法，您的颜色将不会处于相同的饱和度水平。