当前位置：文江博客话题详情

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

发布于 2024-09-12 10:49:18 字数 123 浏览 6 评论 0原文

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

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

有人有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

丑丑阿 2024-09-19 10:49:18

要正确缩放颜色，必须将每个 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 是完全有效的 CSS (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);
}

To scale a color correctly, you have to multiply each RGB value by a proportion. E.g., if your color is #00417b and you want a color that is 125% lighter color then you have to do this:

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))};

Compare the result for yourself: dark is #00417b, and light is #00519A, although it's perfectly valid CSS to describe them as rgb(0, 65, 123) and rgb(0, 81, 154) and probably easier too. By scaling colors in this way they will appear to be at the same level of saturation, something that simply adding or subtracting numbers will not achieve.

Be aware that since values are clamped at [0, 255], if you keep shifting colors, then feeding them back into this process, you can destroy information about the proportion of red, green and blue in the source color. For this reason, keep the original color saved and try to use that as your input each time.

Since your question asked specifically about gradients though, this is how you would go between two color values:

// 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);
}

回复收藏 0 原文