计算线性渐变中的颜色答案

【问题标题】：Calculate a colour in a linear gradient计算线性渐变中的颜色
【发布时间】：2018-09-13 02:27:46
【问题描述】：

我想实现类似下面的幻灯片图像。介于三个值之间的渐变。

从A (-1)开始，中点B (0)，结束C (1)。

我意识到我可以通过将“开始”计算为 a-to-b 并将“结束”计算为 b-to-c 来节省一些精力。我可以做 2 组 2 个渐变，而不是 1 个具有三个值的渐变。

但我对如何从一种颜色转换为另一种颜色感到困惑（尽管在谷歌上搜索）——最好是在 RGB 颜色空间中。

我希望能够拥有这样的东西-

const colourSpace = (value, startColor, endColor) => {...}

colorSpace(-0.25, red, yellow) // some sort of orangey color
colorSpace(1, yellow, green) // fully green
colorSpace(0.8, yellow, green) // mostly green

这不是前端应用程序，因此没有 CSS 渐变 - 这是 google 主要引用的内容。

谢谢大家，奥利

【问题讨论】：

标签： node.js colors backend rgb

【解决方案1】：

我最终使用Chroma 在颜色空间之间进行转换。

【讨论】：

你能发布一个代码 sn-p 或者一些关于你如何使用 Chroma-js 做的解释吗？

【解决方案2】：

如果您不太担心色彩空间的感知一致性（您需要在 LAB 模式下工作才能做到这一点），您可以在 RGB 空间中进行线性插值。基本上你取一个距离（在 0 和 1 之间），将它乘以坐标中的不同，然后将它添加到第一个。这将允许您沿着任意两种颜色之间的线找到任意点（即颜色）。

例如红色和黄色之间：

let canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');

let rgb1 = [255, 0, 0]    // red
let rgb2 = [255, 255, 0]  // yellow

function getPoint(d, a1, a2) {
  // find a color d% between a1 and a2
  return a1.map((p, i) => Math.floor(a1[i] + d * (a2[i] - a1[i])))
}

// for demo purposes fill a canvas
for (let i = 0, j = 0; i < 1; i += .002, j++) {
  let rgb = getPoint(i, rgb1, rgb2)
  ctx.fillStyle = `rgba(${rgb.join(",")}, 1)`
  ctx.fillRect(j, 0, 1, 200);
}

&lt;canvas id="canvas" width="500"&gt;&lt;/canvas&gt;

您可以重复此操作以在渐变中获得多个“停止”。

【讨论】：