如何使用javascript从渐变中按百分比获取颜色值？

我有一个固定宽度的div，使用css应用渐变。我想基于这个渐变构建基于滑块的颜色选择器

当我拖动滑块时，我计算百分比位置，我想根据这个值得到十六进制或rgb颜色代码

我的想法是创建一个定义了开始/停止位置和颜色的数组，然后根据滑块位置从该数组中找到两个值，然后以某种方式找到两者之间的颜色：这是我无法前进的地方

演示：

var梯度=[
[
0,
“ff0000”
],
[
28,
'008000'
],
[
72,
“0000ff”
],
[
100,
“ff0000”
]
];
$（“#滑块”）.滑块({
民:1,，
幻灯片：功能（事件、用户界面）{
var colorRange=[]
$。每个（梯度、函数（索引、值）{
如果（ui.valueI能够使用此函数解决此问题，该函数基于less.js函数：

我只需要从渐变数组中传递两个最接近的颜色代码和滑块手柄所在的比率（可以通过滑块宽度轻松计算）。下面是一个实时示例：

这是将百分比转换为颜色的另一种方法

此示例使显示的值根据其值从红色变为绿色（例如，在excel条件格式中）：

函数（百分比值）{
$（`output`）
//打印值
.html（百分比值）
//将文本着色，如果接近0，则更红
//当它接近100时，它会变得更加绿色
.css（{color:`rgb（${（100%）*2.56}，${percent*2.56}，0）`}）
}

请参阅下面的演示：


$（“按钮”）。单击（e=>{
常数百分比=数学地板（数学随机（）*100）；
常量newElm=$（`${percent}
`）
.css（{color:`rgb（${（100%）*2.56}，${percent*2.56}，0）`}）
$（'body'）.append（newElm）；
})

单击以创建新百分比
三色渐变
为了防止有人想要3色渐变，这里有一个使用红色、黄色和绿色的示例：


用于
colorGradient
函数的github JS代码可用

演示：

//梯度函数
函数颜色渐变（fadeFraction、rgbColor1、rgbColor2、rgbColor3）{
console.log（'>>fade:'，fadeFraction）
var color1=rgbColor1；
var color2=rgbColor2；
var fade=fadeFraction；
//我们有3种颜色的渐变吗？需要调整参数。
if（rgbColor3）{
淡入=淡入*2；
//找到要使用的间隔并调整淡入度百分比
如果（淡入淡出>=1）{
衰减-=1；
颜色1=rgbColor2；
颜色2=rgbColor3；
}
}
var衍射=颜色2.red-颜色1.red；
var diffGreen=color2.green-color1.green；
var diffBlue=color2.blue-color1.blue；
var梯度={
红色：parseInt（数学地板（颜色1.red+（衍射*褪色）），10），
绿色：parseInt（数学地板（color1.green+（diffGreen*fade）），10），
蓝色：parseInt（数学地板（color1.blue+（diffBlue*fade）），10），
};
返回“rgb”（“+gradient.red+”、“+gradient.green+”、“+gradient.blue+”）；
}
//实现示例
变量跨度=$（'梯度测试'）；
变量计数=跨度、长度、颜色；
var color1={
红色：19，绿色：233，蓝色：19
};
变量color3={
红色：255，绿色：0，蓝色：0
};
var color2={
红色：255，绿色：255，蓝色：0
};
$（'.gradient test'）。每个（函数（i，span）{
var g=数学四舍五入（（i+1）*100）/计数；
if（g<10）{
g='0'+g；
} 
g=+g==100？1:+（'0.'+g）
颜色=颜色梯度（g，颜色1，颜色2，颜色3）；
$（span）.css（'background-color'，color）；
})；
。梯度测试{
宽度：1em；
高度：1公厘；
显示：内联块；
}
有一个很好的库，可以处理各种颜色操作

然后

import chroma from 'chroma-js';

const f = chroma.scale(['yellow', 'red', 'black']);

console.log( f(0.25).toString() );                    // #ff8000
console.log( f(0.5).css('rgba') );                    // rgba(255,0,0,1)
console.log( f(0.75).css() );                         // rgb(128,0,0)
console.log( f(1).css() );                            // rgb(0,0,0)

无限多个颜色渐变（两个或更多）
如果您有2、3、4或20种颜色，您可以使用此解决方案。生成
HTML
元素并使用
CSS
渐变背景设置其样式。然后查看单个像素颜色值

创建一个
元素。宽度为101px（0到100%），高度为1px（我们不关心高度）。然后将背景色设置为渐变色。请参阅方法
initCanvas（colorsArray）


查看画布的单个像素，并返回其颜色。请参阅方法
getColor（percent）


最后，你可以找到由5种颜色（红、橙、绿、青、蓝）组成的渐变示例



const WIDTH=101；//0到100
常数高度=1；
让语境；
函数initCanvas（gradientColors）//gradientColors[colorA，colorB，…]
{
//帆布
const canvasElement=document.createElement（“CANVAS”）；
canvasElement.width=宽度；
canvasElement.height=高度；
context=canvasElement.getContext（“2d”）；
//梯度
const gradient=context.createLinearGradient（0，0，WIDTH，0）；//x0，y0，x1，y1
const step=1/（gradientColors.length-1）；//需要验证gradientColors中至少两种颜色
设val=0；
GradientColor.forEach（颜色=>{
渐变。添加颜色停止（val，颜色）；
val+=阶跃；
});
//用梯度填充
context.fillStyle=渐变；
context.fillRect（0，0，宽度，高度）；//x，y，宽度，高度
}
函数getColor（百分比）//百分比[0..100]
{
const color=context.getImageData（百分比，0，1，1）；//x，y，宽度，高度
const rgba=color.data；
返回`rgb（${rgba[0]}，${rgba[1]}，${rgba[2]}）`；
}
//测试：
initCanvas（['红色'、'橙色'、'绿色'、'石灰'、'蓝色']）；
document.getElementById（“color0”）.style.backgroundColor=getColor（0）；
document.getElementById（“color10”）.style.backgroundColor=getColor（10）；
document.getElementById（“color20”）.style.backgroundColor=getColor（20）；
document.getElementById（“color30”）.styl
function pickHex(color1, color2, weight) {
    var w1 = weight;
    var w2 = 1 - w1;
    var rgb = [Math.round(color1[0] * w1 + color2[0] * w2),
        Math.round(color1[1] * w1 + color2[1] * w2),
        Math.round(color1[2] * w1 + color2[2] * w2)];
    return rgb;
}

function colorGradient(fadeFraction, rgbColor1, rgbColor2, rgbColor3) {
    var color1 = rgbColor1;
    var color2 = rgbColor2;
    var fade = fadeFraction;

    // Do we have 3 colors for the gradient? Need to adjust the params.
    if (rgbColor3) {
      fade = fade * 2;

      // Find which interval to use and adjust the fade percentage
      if (fade >= 1) {
        fade -= 1;
        color1 = rgbColor2;
        color2 = rgbColor3;
      }
    }

    var diffRed = color2.red - color1.red;
    var diffGreen = color2.green - color1.green;
    var diffBlue = color2.blue - color1.blue;

    var gradient = {
      red: parseInt(Math.floor(color1.red + (diffRed * fade)), 10),
      green: parseInt(Math.floor(color1.green + (diffGreen * fade)), 10),
      blue: parseInt(Math.floor(color1.blue + (diffBlue * fade)), 10),
    };

    return 'rgb(' + gradient.red + ',' + gradient.green + ',' + gradient.blue + ')';
}

yarn add chroma-js

import chroma from 'chroma-js';

const f = chroma.scale(['yellow', 'red', 'black']);

console.log( f(0.25).toString() );                    // #ff8000
console.log( f(0.5).css('rgba') );                    // rgba(255,0,0,1)
console.log( f(0.75).css() );                         // rgb(128,0,0)
console.log( f(1).css() );                            // rgb(0,0,0)