Heim >Web-Frontend >js-Tutorial >Wie kann ich eine Hex-Farbe in JavaScript programmgesteuert aufhellen oder abdunkeln?

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

Susan Sarandon
Susan SarandonOriginal
2024-11-05 14:05:02496Durchsuche

How can I programmatically lighten or darken a hex color in JavaScript?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn