Javascript计算较暗的颜色

如何将此计算更改为较暗而不是较亮的颜色？Javascript计算较暗的颜色

function increase_brightness(hex, percent){ 
    // strip the leading # if it's there 
    hex = hex.replace(/^\s*#|\s*$/g, ''); 

    // convert 3 char codes --> 6, e.g. `E0F` --> `EE00FF` 
    if(hex.length == 3){ 
     hex = hex.replace(/(.)/g, '$1$1'); 
    } 

    var r = parseInt(hex.substr(0, 2), 16), 
     g = parseInt(hex.substr(2, 2), 16), 
     b = parseInt(hex.substr(4, 2), 16); 

    return '#' + 
     ((0|(1<<8) + r + (256 - r) * percent/100).toString(16)).substr(1) + 
     ((0|(1<<8) + g + (256 - g) * percent/100).toString(16)).substr(1) + 
     ((0|(1<<8) + b + (256 - b) * percent/100).toString(16)).substr(1); 
}

SRC = JavaScript Calculate brighter colour

演示http://jsbin.com/utavax/3/edit

来源

2012-11-14 user1815934

您是否试图与一个负的百分比？ –

您可以更改

return '#' + 
    ((0|(1<<8) + r + (256 - r) * percent/100).toString(16)).substr(1) + 
    ((0|(1<<8) + g + (256 - g) * percent/100).toString(16)).substr(1) + 
    ((0|(1<<8) + b + (256 - b) * percent/100).toString(16)).substr(1);

到

return '#' + 
    ((0|(1<<8) + r * (1 - percent/100)).toString(16)).substr(1) + 
    ((0|(1<<8) + g * (1 - percent/100)).toString(16)).substr(1) + 
    ((0|(1<<8) + b * (1 - percent/100).toString(16)).substr(1);

将解决您的问题。 demo。

但较深的颜色不是一个好的定义。较暗可以被解释为较少的亮度或较少的饱和度。所以更好的方法是将RGB色彩空间转换为HSB色彩空间，并调整S/B通道，然后将其转换回来。

关于为什么原始代码的负值不正确的一点解释。

给-100为百分比，和一些信道，说R，小于128然后

r + (256 - r) * percent/100

小于0，后加1 << 8 = 256

((0|(1<<8) + r + (256 - r) * percent/100)

小于256

取一个小于256的数字，通过调用toString(16)可以产生最多两个十六进制数字，所以.substr(1)将只包含0或1个数字。将所有这些错误的数字组合在一起将不会在十六进制表示中生成适当的颜色。

来源

2012-11-14 08:31:14 xiaoyi

-1

return '#' + 
    ((0|(1<<8) + r + (256 - r) * percent/100).toString(16)).substr(1) + 
    ((0|(1<<8) + g + (256 - g) * percent/100).toString(16)).substr(1) + 
    ((0|(1<<8) + b + (256 - b) * percent/100).toString(16)).substr(1);

这里要添加到当前值的r，g和b一定比例，这使得颜色变浅。如果对百分比使用负值，则它将从当前值下降并使颜色变暗。

来源

2012-11-14 08:16:52

以-100为百分比，某些通道<128.那么在加1 << 8之后该通道的值小于256，并且'toString（）'结果不再是3个字符长，所以颜色无效。这就是为什么负值不好的原因。 – xiaoyi

我已经采取了从Stylus（1，2）的主要思想和Stack Overflow answers几部分代码和生成库，darken_color.js。

下面是一些用法示例：

darken('lightgreen', '0.1'); // -> #63e763 
darken('lightgreen', '10'); // -> #63e763 
darken('#90EE90', '10'); // -> #63e763 
darken('#9e9', '10%'); // -> #98ed98

来源

2013-06-06 09:56:00 shybovycha

Javascript计算较暗的颜色

回答

相关问题