Wie kann ich eine Hex-Farbe in JavaScript programmgesteuert aufhellen oder abdunkeln?

Eine Hex-Farbe (oder RGB und Mischfarben) programmgesteuert aufhellen oder abdunkeln

Mit dieser Funktion können Sie eine Hex-Farbe programmgesteuert um einen bestimmten Betrag aufhellen oder abdunkeln. Übergeben Sie einfach eine Zeichenfolge wie „3F6D2A“ für die Farbe und eine Ganzzahl amt für den Aufhellungs- oder Abdunkelungsbetrag. Übergeben Sie zum Abdunkeln eine negative Zahl (z. B. -20).

<code class="js">function LightenDarkenColor(col, amt) {
  col = parseInt(col, 16);
  return (((col & 0x0000FF) + amt) | ((((col >> 8) & 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16);
}

// TEST
console.log(LightenDarkenColor("3F6D2A", 40));

Andere Versionen

Schnellere und kleinere Version:

<code class="js">function LightenDarkenColor(col, amt) {
  var num = parseInt(col, 16);
  var r = (num >> 16) + amt;
  var b = ((num >> 8) & 0x00FF) + amt;
  var g = (num & 0x0000FF) + amt;
  var newColor = g | (b << 8) | (r << 16);
  return newColor.toString(16);
}

// TEST
console.log(LightenDarkenColor("3F6D2A", -40));

Verarbeiten Sie Farben mit oder ohne #-Präfix:

<code class="js">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);
}</code>

Verwendung

Um die Funktion zu verwenden, übergeben Sie einfach die hexadezimale Farbzeichenfolge, die Sie aufhellen möchten abdunkeln und den Betrag angeben, um den Sie es anpassen möchten. Der folgende Code hellt beispielsweise die Farbe „3F6D2A“ um 40 auf:

<code class="js">const lightenedColor = LightenDarkenColor("3F6D2A", 40);
console.log(`Lightened Color: ${lightenedColor}`); // Output: 7FADEE</code>

Leistung

Die Leistung dieser Funktion ist hinsichtlich Geschwindigkeit und Größe optimiert. Es verwendet bitweise Operationen, um die Farbwerte zu manipulieren, was es extrem schnell macht. Die Funktion ist außerdem sehr klein und daher ideal für den Einsatz in kleinen Anwendungen.

Funktionen

• Hellert oder verdunkelt eine Hex-Farbe um einen angegebenen Betrag
• Verwaltet Farben mit oder ohne #-Präfix
• Passt falsche Farbwerte an
• Gibt eine Hex-String-Darstellung der neuen Farbe zurück

Einschränkungen

• Die Funktion konvertiert die Farbe nicht in HSL, um die Farbe richtig aufzuhellen oder abzudunkeln. Daher können die Ergebnisse von Funktionen abweichen, die HSL verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Hex-Farbe in JavaScript programmgesteuert aufhellen oder abdunkeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!