Comment puis-je éclaircir ou assombrir par programmation une couleur hexadécimale en JavaScript ?

Éclaircir ou assombrir par programme une couleur hexadécimale (ou RVB et mélanger les couleurs)

Cette fonction vous permet d'éclaircir ou d'assombrir par programme une couleur hexadécimale d'une quantité spécifique. Passez simplement une chaîne comme "3F6D2A" pour la couleur et un nombre entier pour la quantité à éclaircir ou à assombrir. Pour assombrir, passez un nombre négatif (par exemple, -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));

Autres versions

Version plus rapide et plus petite :

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

Gérer les couleurs avec ou sans le préfixe # :

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

Utilisation

Pour utiliser la fonction, transmettez simplement la chaîne de couleur hexadécimale que vous souhaitez éclaircir ou assombrir et la quantité par laquelle vous souhaitez l'ajuster. Par exemple, le code suivant éclaircit la couleur "3F6D2A" de 40 :

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

Performances

Les performances de cette fonction sont optimisées pour la vitesse et la taille. Il utilise des opérations au niveau du bit pour manipuler les valeurs de couleur, ce qui le rend extrêmement rapide. La fonction est également très petite, ce qui la rend idéale pour une utilisation dans de petites applications.

Caractéristiques

• Éclaircit ou assombrit une couleur hexadécimale d'une quantité spécifiée
• Gère les couleurs avec ou sans le préfixe #
• Ajuste les valeurs de couleur incorrectes
• Renvoie une représentation sous forme de chaîne hexadécimale de la nouvelle couleur

Limitations

• La fonction ne convertit pas la couleur en HSL pour éclaircir ou assombrir correctement la couleur. Par conséquent, les résultats peuvent différer des fonctions qui utilisent HSL.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!