在HTML,CSS使用颜色和JavaScript很容易。 然而,它往往需要以编程方式生成的颜色,即你需要一个颜色,这是20%的亮度比#123或10%,比#abcdef暗。
CSS3提供了一个很好的解决方案:HSL。 而不是使用十六进制或RGB颜色,可以设置色调,饱和度,亮度(或亮度 )和,任选地,不透明度,例如
color: hsla(50, 80%, 20%, 0.5);
background-color: hsl(120, 100%, 50%);
HSL和HSLA除了IE8及以下,大多数浏览器都支持。 您可以设置第三亮度参数来改变你的颜色应该如何亮或过暗定。
不幸的是,我们并不总是有HSL工作的奢侈品。 虽然你可以设置一个单独的HSL颜色,浏览器最终将其转换为RGB。 此外,RGB通常更容易使用,你可能有这种格式已经定义的颜色。
有多种算法来改变颜色的亮度。 许多RGB转换到HSL然后再回到这是客户端脚本一个相当令人费解的计算。 因此,我用JavaScript编写的一个快速和简单的跨浏览器的解决方案。 ColorLuminance接受两个参数:
- 十六进制 -十六进制颜色值,例如“#abc”或“#123456”(散列是可选的)
- LUM -亮度因数,即,-0.1是10%更暗,0.2是轻20%等。
完整的代码:
function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
return rgb;
}
在本质上,前三行清洁串和扩大3位十六进制代码到全6位表示。
循环提取反过来红色,绿色和蓝色的值,并将其转换为十进制,应用可见度,并将其转换回为十六进制。 例子:
ColorLuminance("#69c", 0); // returns "#6699cc"
ColorLuminance("6699CC", 0.2); // "#7ab8f5" - 20% lighter
ColorLuminance("69C", -0.5); // "#334d66" - 50% darker
ColorLuminance("000", 1); // "#000000" - true black cannot be made lighter!
请观看演示页面 ; 颜色渐变使用一系列100个的生成div
元素与稍浅的背景。
希望对你有帮助。 我将使用该功能在另一个示范即将上SitePoint ...
From: https://www.sitepoint.com//javascript-generate-lighter-darker-color/