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

Question

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

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

有人有什么想法吗？

Answer 1

要正确缩放颜色，您必须将每个 RGB 值乘以一个比例。 例如，如果您的颜色是#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) 也可能更简单。通过以这种方式缩放颜色，它们将看起来处于相同的饱和度水平，这是简单地添加或减去数字无法实现的。

请注意，由于值被限制在 [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);
}