计算线性渐变中的颜色 [英] Calculate a colour in a linear gradient

问题描述

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

I'd like to implement something like the powerpoint image below. A gradient that goes between three values.

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

It starts at A (-1), the mid point is B (0), and the end is C (1).

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

I have realised that I can save some effort by calculating the 'start' as a-to-b, and the 'end' as b-to-c. I can do as 2 sets of 2 gradients, instead of 1 gradient with three values.

但是我对如何从一种颜色转换为另一种颜色(尽管最好是在RGB颜色空间中)感到困惑(

But I'm stumped (despite googling) on how to get from one colour to another - ideally in the RGB colour space.

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

I'd like to be able to have something like this -

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主要引用的内容.

谢谢， 奥利(Ollie)

Thanks all, Ollie

推荐答案

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

I ended up using Chroma for converting between colour spaces.

这篇关于计算线性渐变中的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！