در پیش پردازنده های CSS همچون SASS و LESS امکانی وجود دارد که می توانید یک رنگ را روشن تر (lighter) یا تاریکتر (darker) کنید ولی متاسفانه این امکان در خود جاوا اسکریپت وجود ندارد.
تابه زیر رنگ را به فرمت HEX می گیرد و آن را وابسته مقدار داده شده روشن تر یا تاریکتر میکند.


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);

پیش نمایش

See the Pen Color Alteration in JavaScript by Chris Coyier (@chriscoyier) on CodePen