如何在Javascript中按百分比使一种颜色与另一种颜色相似

我有两种十六进制的颜色，

#000000

和

#ffffff

。我想将第一种颜色与第二种颜色的比例近似。 比如：

var percent=0.50;
var color1='#000000';
var color2='#ffffff';

var newcolor=approximateColor1ToColor2ByPercent(color1,color2,percent);
//newcolor should be a gray like #808080

如何进行此操作？

对于添加剂颜色混合： 要混合这两种颜色，请执行以下操作：

function approximateColor1ToColor2ByPercent(color1, color2, percent) {
  var red1 = parseInt(color1[1] + color1[2], 16);
  var green1 = parseInt(color1[3] + color1[4], 16);
  var blue1 = parseInt(color1[5] + color1[6], 16);

  var red2 = parseInt(color2[1] + color2[2], 16);
  var green2 = parseInt(color2[3] + color2[4], 16);
  var blue2 = parseInt(color2[5] + color2[6], 16);

  var red = Math.round(mix(red1, red2, percent));
  var green = Math.round(mix(green1, green2, percent));
  var blue = Math.round(mix(blue1, blue2, percent));

  return generateHex(red, green, blue);
}

function generateHex(r, g, b) {
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);

  // to address problem mentioned by Alexis Wilke:
  while (r.length < 2) { r = "0" + r; }
  while (g.length < 2) { g = "0" + g; }
  while (b.length < 2) { b = "0" + b; }

  return "#" + r + g + b;
}

function mix(start, end, percent) {
    return start + ((percent) * (end - start));
}

---

将返回'#808080'

我不专业，请分享我的努力

大自然和计算机之间的性能颜色方式不同。要获得与您想要的颜色相似的颜色，您可以使用浅蓝色（

#00FFFF

）而不是（

#oooff

）

所以我尝试了两种颜色混合方法，第一种是传统的添加剂混合：

newColor.R = (color1.R + color2.R)/2

对于alpha混合，color1和color2都有自己的alpha通道，表示其自身的透明度。因此alpha混合算法应该类似（R、G、B的范围为0到255）：

我已经实现了它们，您可以看到结果：

//将十六进制颜色转换为rgb颜色
函数HexToRgb（hexcolor）{
var hexR=hexcolor.substr（0,2）；
var hexG=hexcolor.substr（2,2）；
var hexB=hexcolor.substr（4,2）；
var rgbColor=[]；
rgbColor[0]=parseInt（hexR，16）；
rgbColor[1]=parseInt（hexG，16）；
rgbColor[2]=parseInt（hexB，16）；
返回RGB颜色；
}
//转换rgb颜色int十六进制颜色
函数RgbtoHex（rgbcolor）{
var hexColor=rgbcolor[0]。toString（16）+rgbcolor[1]。toString（16）+rgbcolor[2]。toString（16）；
返回六边形颜色；
}
//混合两种颜色的添加剂
函数加法迁移（color1，color2）{
var rgbColor1=HexToRgb（参数[0]）；
var rgbColor2=HexToRgb（参数[1]）；
var newColor=[]；
对于（变量n=0；n<3；n++）{
newColor[n]=数学圆（（rgbColor1[n]+rgbColor2[n]）/2）；
}
返回RgbtoHex（新颜色）；
}
//Alpha将两种颜色与两个Alpha混合
函数alphaBlending（颜色1、颜色2、字母1、字母2）{
var rgbColor1=HexToRgb（参数[0]）；
var rgbColor2=HexToRgb（参数[1]）；
var newColor=[]；
var alpha1=参数[2]；
var alpha2=参数[3]；
varα=1-（1-α1）*（1-α2）；
对于（变量n=0；n<3；n++）{
newColor[n]=数学圆（（rgbColor1[n]/255.0*alpha1/alpha+rgbColor2[n]/255.0*alpha2*（1-alpha1）/alpha）*255）；
}
返回RgbtoHex（新颜色）；
}
//显示基色变化
$（“#color1，#color2”）.change（函数（）{
var color=$（this.val（）；
$（this.next（）.css（“背景色”，颜色）；
});
//混色
$（“按钮”）。单击（函数（）{
var color1=$（“#color1”）.val（）.substr（1）；
var color2=$（“#color2”）.val（）.substr（1）；
var alpha1=parseFloat（$（“#alpha1”）.val（）；
var alpha2=parseFloat（$（“#alpha2”）.val（）；
var additiveColor=加性混合（颜色1，颜色2）；
var alphablendColor=alphaBlending（颜色1、颜色2、颜色1、颜色2）；
$（“#加法span”）.text（“#”+加法颜色）；
$（“#加法span”）.parent（）.next（）.css（“背景色”，“#”+加法色）；
$（“#alpha span”）.text（“#”+alphablendColor）；
$（“#alpha span”）.parent（）.next（）.css（“背景色”，“#”+alphablendColor）；
});
.color\u块{
宽度：50px；
高度：20px；
边缘顶部：5px；
边框：1px纯黑；
}
#结果{
位置：绝对位置；
顶部：15px；
左：240px；
}



颜色1




颜色2




阿尔法1（0-1）




阿尔法2（0-1）






混合！
添加剂混合色不适用

alpha混合色不适用

ES6实施：

事实上，我只是用ES6重新写了这篇文章的正确答案，并用TypeScript语言键入：

const generateHex=（r:number，g:number，b:number）：string=>{
设R=R.toString（16）；
设G=G.toString（16）；
设B=B.toString（16）；
而（R.长度<2）{
R=`0${R}`；
}
而（G.长度<2）{
G=`0${G}`；
}
而（B.长度<2）{
B=`0${B}`；
}
返回`${R}${G}${B}`；
};
const mix=（开始：数字，结束：数字，百分比：数字）：数字=>
开始+（百分比/100）*（结束-开始）；
常量混合器=（color1:string，color2:string，percent:number）：string=>{
const red1=parseInt（`${color1[1]}${color1[2]}`，16）；
const green1=parseInt（`${color1[3]}${color1[4]}`，16）；
constblue1=parseInt（`${color1[5]}${color1[6]}`，16）；
const red2=parseInt（`${color2[1]}${color2[2]}`，16）；
const green2=parseInt（`${color2[3]}${color2[4]}`，16）；
constblue2=parseInt（`${color2[5]}${color2[6]}`，16）；
常数red=数学四舍五入（混合（红色1，红色2，百分比））；
常量绿色=数学圆形（混合（绿色1，绿色2，百分比））；
常量蓝=数学圆（混合（蓝色1，蓝色2，百分比））；
返回generateHex（红色、绿色、蓝色）；
};
导出默认搅拌机；

注意：使用
混合器
功能将两种给定颜色与百分比数合并，这意味着PERCEN数应在0~100之间，对于测试，您可以使用以下代码：

document.body.style.backgroundColor = blender('#ffffff', '#ff0000', 30);

你是说，你想把黑色混合成白色？颜色混合很复杂。请参阅以下答案：less.js库中的颜色混合功能将黄色+蓝色混合为灰色，这可能是所需的颜色，也可能不是所需的颜色。混合颜色还有很多其他可能的算法。@Stuart-我刚刚意识到，在加法颜色模型上混合纯黄色和蓝色等颜色时，会产生灰色。这是因为你基本上混合了50%的红色，50%的绿色和50%的蓝色。你可能需要看看减法混合，我会把它放在我的答案中。如果结果颜色在0到15（0x0F）之间会发生什么？@Alexiswillke-是的，这是我要解决的另一件事。谢谢。您的rgbtohex函数并不总是有效-尝试将#000ff与#ff0000混合使用-请参阅以获取解决方案。
newAlpha = 1 - (1-color1.Alpha) * (1-color2.Alpha)
newColor.R = (color1.R/255 * color1.Alpha / newAlpha + color2.R/255 * color2.Alpha * (1-color1.Alpha) / newAlpha)*255

document.body.style.backgroundColor = blender('#ffffff', '#ff0000', 30);