如何在JavaScript中计算较浅或较深的十六进制颜色

在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/