计算线性渐变中的颜色

Question

我想实现类似于下面的 powerpoint 图片的东西。介于三个值之间的渐变。

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

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

但我对如何从一种颜色变为另一种颜色感到困惑（尽管使用谷歌搜索）——最好是 RGB 颜色 space。

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

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

如果您不太担心颜色之间的感知一致性 space（您需要在 LAB 模式下工作才能做到这一点），您可以只采用 RGB 中的线性插值 space。基本上你取一个距离（在 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>

您可以重复此操作以获得渐变中的多个 'stops'。

Answer 2

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

计算线性渐变中的颜色

Calculate a colour in a linear gradient

rgb

backend

colors

node.js