Maison > interface Web > js tutoriel > Comment puis-je éclaircir ou assombrir par programmation une couleur hexadécimale en JavaScript ?

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

Susan Sarandon
Libérer: 2024-11-05 14:05:02
original
495 Les gens l'ont consulté

How can I programmatically lighten or darken a hex color in 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));
Copier après la connexion

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));
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal