您只需线性插值红色、绿色和蓝色通道，如下所示：

double resultRed = color1.red + percent * (color2.red - color1.red);
double resultGreen = color1.green + percent * (color2.green - color1.green);
double resultBlue = color1.blue + percent * (color2.blue - color1.blue);

其中percent是0到1之间的值（第一个方法原型中的location）。

RGB颜色空间就像一个圆。最高饱和度沿着外边界，灰色在中间。从一种颜色到另一种颜色，你最好是这样做，沿着相同的半径（圆）从中间;以便饱和度和值保持不变。在这种情况下，色调是以线性方式变化的。你不会进入比你的左和右颜色最初更多的灰色区域。你可以从内环旅行到外环，简单地上升（或下降）饱和度;再次线性。请参阅here的颜色圆圈（尝试它在例如paint.net）
Apple（iOS）的物镜类允许您使用RGB以外的其他光谱。

我知道从技术上讲这不是一个javascript问题，但我也在纠结于同一个概念，所以我想我应该做一个演示来可视化公认的答案
运行下面的代码并移动滑块

var sample=document.querySelector("#sample")
var range=document.querySelector("#range")

// rgb(255,0,0)
var color1_red=255
var color1_green=0
var color1_blue=0

// rgb(0,0,255)
var color2_red=0
var color2_green=0
var color2_blue=255

document.querySelector("#range").addEventListener("input",(event)=>{
 let percent= range.value/100.0
 
 let resultRed = color1_red + percent * (color2_red - color1_red);
 let resultGreen = color1_green + percent * (color2_green - color1_green);
 let resultBlue = color1_blue + percent * (color2_blue - color1_blue);
 
 sample.style.backgroundColor=`rgb(${resultRed},${resultGreen},${resultBlue})`
})

#sample{
  height:10rem;
  width:10rem;
}

#range{
  width:10rem
}

#grad{
  width:10rem;
  height:2rem;
  background-image: linear-gradient(to right, red , blue);
}

<div id="grad"></div>
<input type="range" min="1" max="100" value="0" id="range">

<div id="sample" style="background-color:rgb(255,0,0);"></div>

希望这在某种程度上有所帮助：）