【发布时间】:2014-01-28 20:55:20
【问题描述】:
我希望用户能够输入随机的十六进制颜色,并且我的 javascript 代码会打印出该颜色的较浅版本(可以说是某种算法)
我希望如何更改颜色的简单示例。
用户输入的内容:#2AC0A3
它吐出什么:#C6EEE6
非常感谢任何可以提供帮助的人!
【问题讨论】:
-
如果你能给出一个比一个例子更完整的“更轻”的定义,这会好很多。
标签: javascript algorithm hex
我希望用户能够输入随机的十六进制颜色,并且我的 javascript 代码会打印出该颜色的较浅版本(可以说是某种算法)
我希望如何更改颜色的简单示例。
用户输入的内容:#2AC0A3
它吐出什么:#C6EEE6
非常感谢任何可以提供帮助的人!
【问题讨论】:
标签: javascript algorithm hex
一种使颜色变亮的简单方法是使用白色进行线性插值。同理,可以通过黑色插值使颜色变暗。
这是一个接受颜色字符串并改变light指示的亮度的函数:
function hex2(c) {
c = Math.round(c);
if (c < 0) c = 0;
if (c > 255) c = 255;
var s = c.toString(16);
if (s.length < 2) s = "0" + s;
return s;
}
function color(r, g, b) {
return "#" + hex2(r) + hex2(g) + hex2(b);
}
function shade(col, light) {
// TODO: Assert that col is good and that -1 < light < 1
var r = parseInt(col.substr(1, 2), 16);
var g = parseInt(col.substr(3, 2), 16);
var b = parseInt(col.substr(5, 2), 16);
if (light < 0) {
r = (1 + light) * r;
g = (1 + light) * g;
b = (1 + light) * b;
} else {
r = (1 - light) * r + light * 255;
g = (1 - light) * g + light * 255;
b = (1 - light) * b + light * 255;
}
return color(r, g, b);
}
light为负数时,颜色变暗; -1 总是产生黑色。当light 为正时,颜色变浅,1 总是产生白色。最后,0 总是产生原始颜色:
alert(shade("#2ac0a3", 0.731));
【讨论】: