如何用百分数来计算三者之间的颜色比例
How to calculate the proportional color between the three given with a percentage?
我有三种用户介绍的十六进制颜色,例如:
#39bf26
#c7c228
#C7282E
然后他们必须在1到100之间选择一个百分比。
- 如果百分比为100,则返回的颜色为插入的第一个颜色:#39bf26.
- 如果百分比为50,则返回的颜色为插入的第二个颜色:#c7c228.
- 如果percentaje为1,则返回的颜色将是插入的第三种颜色:#C7282E.
- 最后,如果百分比介于前面的任何一个值之间,然后返回的颜色将是前两种颜色的比例混合颜色:百分比<50和最后两种颜色的混合
我在这里发现了一个类似的算法:http://www.awcore.com/js/snippets/161/from-red-to-green-color-map-depend-on-percentage_en
但我恐怕没有色彩算法的经验,所以我希望你能给我一些建议或指导。
如果你需要更多的信息,请告诉我,我会编辑这篇文章
不必要的过度-引入Colour
对象来解析,.scale
和.add
十六进制颜色
var Colour = (function () {
function limit(x) {
if (x > 255) return 255;
if (x < 0) return 0;
return Math.floor(x);
}
function toHex(r, g, b) {
if (r > 15) r = r.toString(16);
else r = '0' + r.toString(16);
if (g > 15) g = g.toString(16);
else g = '0' + g.toString(16);
if (b > 15) b = b.toString(16);
else b = '0' + b.toString(16);
return '#' + (r + g + b).toUpperCase();
}
function Colour(hex) {
if (hex.length === 7 || hex.length === 4) hex = hex.slice(1);
if (hex.length === 3)
hex = hex.charAt(0) + hex.charAt(0)
+ hex.charAt(1) + hex.charAt(1)
+ hex.charAt(2) + hex.charAt(2);
this.hex = '#' + hex.toUpperCase();
this.r = parseInt(hex.slice(0, 2), 16);
this.g = parseInt(hex.slice(2, 4), 16);
this.b = parseInt(hex.slice(4, 6), 16);
}
Colour.prototype.scale = function (x) {
this.r = limit(this.r * x);
this.g = limit(this.g * x);
this.b = limit(this.b * x);
this.hex = toHex(this.r, this.g, this.b);
return this;
};
Colour.prototype.add = function (c) {
return new Colour(
toHex(
limit(this.r + c.r),
limit(this.g + c.g),
limit(this.b + c.b)
)
);
};
Colour.prototype.toString = function () {
return this.hex;
};
Colour.prototype.valueOf = Colour.prototype.toString;
return Colour;
}());
然后介绍你的颜色;
var myColours = [
new Colour('#39bf26'), // Colour {hex: "#39BF26", r: 57, g: 191, b: 38, …}
new Colour('#c7c228'), // Colour {hex: "#C7C228", r: 199, g: 194, b: 40, …}
new Colour('#C7282E') // Colour {hex: "#C7282E", r: 199, g: 40, b: 46, …}
];
现在为百分比逻辑写一个函数
function percent(x, col) {
var factor;
if (x < 50) {
factor = (50 - x) / 50;
return col[0].scale(factor).add(col[1].scale(1-factor));
} else {
factor = (100 - x) / 50;
return col[2].scale(factor).add(col[1].scale(1-factor));
}
}
并使用它
percent(25, myColours); // Colour {hex: "#7FC027", r: 127, g: 192, b: 39, …}
percent(75, myColours); // Colour {hex: "#C6752B", r: 198, g: 117, b: 43, …}
不幸的是(除非您想引入新的属性),这将遭受小的舍入误差,如75%的结果所示(C6不是C7红色,因为C7 = 199, 199/2 = 99.5 => 99,然后99 + 99 = 198 => C6)。
好的,解决方案如下:
function getColorForPercentage(pct) {
pct /= 100;
var percentColors = [
{ pct: 0.01, color: { r: 0xdd, g: 0x51, b: 0x4c } },
{ pct: 0.5, color: { r: 0xfa, g: 0xa7, b: 0x32 } },
{ pct: 1.0, color: { r: 0x5e, g: 0xb9, b: 0x5e }} ];
for (var i = 0; i < percentColors.length; i++) {
if (pct <= percentColors[i].pct) {
var lower = percentColors[i - 1] || { pct: 0.1, color: { r: 0x0, g: 0x00, b: 0 } };
var upper = percentColors[i];
var range = upper.pct - lower.pct;
var rangePct = (pct - lower.pct) / range;
var pctLower = 1 - rangePct;
var pctUpper = rangePct;
var color = {
r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
};
return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
}
}
}
相关文章:
- 选择两种颜色并在两者之间选择n种颜色
- 边距和输入元素边框之间的填充颜色
- 从表列中检索日期,并根据从今天到日期之间的天数使行的颜色发生变化
- 检查类以在背景颜色之间切换
- 屏幕在两种颜色之间闪烁的速度足够快,因此人眼无法想象
- 颜色框和引导库之间的冲突
- 如何在高图表的 2 点之间制作颜色填充区域
- 在背景颜色背景图像之间分层文本
- 使用Javascript在鼠标移动时在两种颜色之间切换
- 如何确定两种HEX颜色之间的差异
- 如何以编程方式计算两种颜色之间的对比度
- 在两种颜色之间切换的功能
- 两个选择的rgb颜色之间的随机颜色(JavaScript)
- 在three.js中材质的漫射贴图和颜色之间的相关性
- 用javascript检测颜色是否介于两种颜色之间
- Jquery切换两种颜色之间的css类
- & lt; li>不同背景颜色之间的元素切换
- 生成两种颜色之间的颜色javascript
- 使用javascript在两个背景颜色之间切换一个按钮
- 颜色之间的动画