Farbe aufhellen / abdunkeln

Die CSS-Präprozessoren Sass und Less können jede Farbe nehmen und sie um einen bestimmten Wert darken() (abdunkeln) oder lighten() (aufhellen). Dies ist jedoch in JavaScript nicht eingebaut. Diese Funktion nimmt Farben im Hex-Format (d. h. #F06D06, mit oder ohne Hash) und hellt sie auf oder dunkelt sie mit einem Wert ab.

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

Verwendung

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

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

Demo

Siehe den Pen
Farbänderung in JavaScript von Chris Coyier (@chriscoyier)
auf CodePen.