javascript對任意顏色獲取更亮或更暗的顏色值

Freeman 發(fā)布于2019-08-20 18:12 / 1325人閱讀

摘要：預(yù)處理，比如和可以通過設(shè)定一個(gè)特定值，讓任何顏色變得更亮或者更暗。下面這個(gè)方法能在中得到一個(gè)更亮或者更暗的值，通過一個(gè)給定的十六進(jìn)制顏色值比如或者沒有原文來自輪子工廠一個(gè)分享優(yōu)秀組件的網(wǎng)站

預(yù)處理CSS，比如Sass和less可以通過設(shè)定一個(gè)特定值，讓任何顏色變得更亮或者更暗。但是在javascript中卻沒有這種方法。下面這個(gè)方法能在javascript中得到一個(gè)更亮或者更暗的值，通過一個(gè)給定的十六進(jìn)制顏色值（比如#F06D06,或者沒有#）

function LightenDarkenColor(col, amt) {
  
    var usePound = false;
  
    if (col[0] == "#") {
        col = col.slice(1);
        usePound = true;
    }
 
    var num = parseInt(col,16);
 
    var r = (num >> 16) + amt;
 
    if (r > 255) r = 255;
    else if  (r < 0) r = 0;
 
    var b = ((num >> 8) & 0x00FF) + amt;
 
    if (b > 255) b = 255;
    else if  (b < 0) b = 0;
 
    var g = (num & 0x0000FF) + amt;
 
    if (g > 255) g = 255;
    else if (g < 0) g = 0;
 
    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
  
}

// Lighten
var NewColor = LightenDarkenColor("#F06D06", 20); 

// Darken
var NewColor = LightenDarkenColor("#F06D06", -20);

原文來自css-tricks
輪子工廠--一個(gè)分享vue,angular優(yōu)秀組件的網(wǎng)站

云服務(wù)器 GPU云服務(wù)器顏色值所有顏色值不同顏色值得到顏色值

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84194.html

相關(guān)文章

javascript對任意顏色獲取更亮或更暗的顏色值

摘要：預(yù)處理，比如和可以通過設(shè)定一個(gè)特定值，讓任何顏色變得更亮或者更暗。下面這個(gè)方法能在中得到一個(gè)更亮或者更暗的值，通過一個(gè)給定的十六進(jìn)制顏色值比如或者沒有原文來自輪子工廠一個(gè)分享優(yōu)秀組件的網(wǎng)站預(yù)處理CSS，比如Sass和less可以通過設(shè)定一個(gè)特定值，讓任何顏色變得更亮或者更暗。但是在javascript中卻沒有這種方法。下面這個(gè)方法能在javascript中得到一個(gè)更亮或者更暗的值，通...

zzzmh 2019-08-29 12:58 評論0 收藏0
JavaScript寫一個(gè)簡單的Ps濾鏡效果

摘要：給圖像設(shè)置一個(gè)陰影效果。一值設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。的價(jià)值是完全反轉(zhuǎn)。超過的值是允許的，則有更高的飽和度。值為則完全是深褐色的，值為圖像無變化。效果預(yù)覽 showImg(https://segmentfault.com/img/bVbpSTz?w=648&h=729); 思路其實(shí)非常非常趕單~CSS3多了一個(gè)filter的屬性，非常強(qiáng)大（兼容性一般）！我們只要根據(jù)輸入的值/滑...

王陸寬 2019-08-23 15:57 評論0 收藏0
JavaScript寫一個(gè)簡單的Ps濾鏡效果

摘要：給圖像設(shè)置一個(gè)陰影效果。一值設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。的價(jià)值是完全反轉(zhuǎn)。超過的值是允許的，則有更高的飽和度。值為則完全是深褐色的，值為圖像無變化。效果預(yù)覽 showImg(https://segmentfault.com/img/bVbpSTz?w=648&h=729); 思路其實(shí)非常非常趕單~CSS3多了一個(gè)filter的屬性，非常強(qiáng)大（兼容性一般）！我們只要根據(jù)輸入的值/滑...

voyagelab 2019-08-02 14:30 評論0 收藏0
CSS中filter屬性的使用

摘要：屬性定義了元素的可視效果給圖像設(shè)置高斯模糊。值為圖像全黑值超過圖像更亮調(diào)整圖像的對比度。一值設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。的價(jià)值是完全反轉(zhuǎn)。超過的值是允許的，則有更高的飽和度。值為則完全是深褐色的，值為圖像無變化。 filter 屬性定義了元素的可視效果 blur 給圖像設(shè)置高斯模糊。radius一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起，所以值越大越模糊。如果沒有...

Darkgel 2019-08-29 16:59 評論0 收藏0
CSS中filter屬性的使用

摘要：屬性定義了元素的可視效果給圖像設(shè)置高斯模糊。值為圖像全黑值超過圖像更亮調(diào)整圖像的對比度。一值設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。的價(jià)值是完全反轉(zhuǎn)。超過的值是允許的，則有更高的飽和度。值為則完全是深褐色的，值為圖像無變化。 filter 屬性定義了元素的可視效果 blur 給圖像設(shè)置高斯模糊。radius一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起，所以值越大越模糊。如果沒有...

EsgynChina 2019-08-02 11:42 評論0 收藏0