Sahir Khedhayir: Helligkeit von RGB-Farben dynamisch ändern

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

  1. hi,

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

    pfui-bah, eval.

    warum nicht toString() verwenden, und noch mal in parseInt() schachteln, um wieder eine zahl zu erhalten?

    http://de.selfhtml.org/javascript/objekte/number.htm#to_string

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

    nochmal pfui.

    warum nicht in zwei schritten, erst mal multiplizieren, und dann toFixed() darauf anwenden?

    oder, statt toFixed() gleich Math.floor() oder Math.round(), je nachdem, was gewünscht ist.

    gruß,
    wahsaga

    --
    Windows Service Pack?
    Ich dachte bisher immer, das wäre eine verächtliche Bezeichnung für MCSE ...
    1. he wahsaga,

      nicht gleich so garstig wahsaga, ist doch gut, wenn sich mal jemand einen kopf macht und seine ideen hier vorstellt.

      also erst loben und dann ein "aber", "wie wär's damit" oder "verbesserungsvorschlag" anhängen (kleines 1x1 der psychologie).

      also weiterso, ihr fleißigen tastaturhäuplinge!

      gruß
      HP