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計算較暗的顏色

回答

相關問題