计算线性渐变中的颜色

Question

我想实现下面的PowerPoint图片。介于三个值之间的渐变。

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

我已经意识到，我可以通过将“开始”计算为从a到b，将“结束”计算为从b到c来节省一些精力。我可以做2组2个渐变，而不是3个值的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主要引用的内容。

谢谢， 奥利

Answer 1

如果您不太担心在色彩空间上的感知一致性（您需要在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);
}

<canvas id="canvas" width="500"></canvas>

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

Answer 2

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