Helligkeit von RGB-Farben dynamisch ändern

[Sahir Khedhayir]

Wer Web-Design macht, der hatte vielleicht schon mal den Wunsch gehabt, helle oder dunkle Schattierungen von einer Farbe dynamisch abzuleiten, statt sie jedes Mal per Hand neu generieren und ausprobieren zu müssen. Ein Beispiel: das dynamische Erzeugen von Rändern für Tasten oder Objakte, die die style-Eigenschaft unterstützen.

Mit dieser Funktion ist es möglich, einfach eine Farbe zu übergeben und anhand eines Faktors zu bestimmen, ob die Ausgangsfarbe heller oder dunkeler wird. Ist der Faktor > 1 (z.B. 1.2) wird die Ausgangsfarbe heller, ist der Faktor < 1 (z.B. 0.8), wird die Farbe dunkler. Der Faktor 1 bewirkt keine Änderung. Die Farbe selbst (colHex) hat das Format '#RRGGBB', wie sie auch normalerweise in HTML angegeben wird.

function ColorBrightness(colHex, factor){
 var red = eval('0x' + colHex.substr(1, 2))
 var green = eval('0x' + colHex.substr(3, 2))
 var blue = eval('0x' + colHex.substr(5, 2))

red = eval((red * factor).toFixed(0));
 green = eval((green * factor).toFixed(0));
 blue = eval((blue * factor).toFixed(0));

if(red > 255) red = 255;
 if(green > 255) green = 255;
 if(blue > 255) blue = 255;

red = red.toString(16).toUpperCase();
 green = green.toString(16).toUpperCase();
 blue = blue.toString(16).toUpperCase();

if(red.length == 1) red = '0' + red;
 if(green.length == 1) green = '0' + green;
 if(blue.length == 1) blue = '0' + blue;

return '#' + red + green + blue;
}