Maison > interface Web > js tutoriel > Comment éclaircir ou assombrir un code couleur hexadécimal ?

Comment éclaircir ou assombrir un code couleur hexadécimal ?

DDD
Libérer: 2024-11-08 05:06:01
original
208 Les gens l'ont consulté

How to Lighten or Darken a Hex Color Code?

Cet exemple de code montre un programme qui vous permet d'éclaircir ou d'assombrir une couleur hexadécimale d'une quantité spécifique. Vous pouvez fournir une couleur hexadécimale sous forme de chaîne, telle que "3F6D2A", et un nombre entier représentant la quantité par laquelle vous souhaitez ajuster la couleur, soit en l'éclaircissant, soit en l'assombrissant.

Voici comment fonctionne le programme :

  1. Il prend la chaîne de couleur hexadécimale et la convertit en un entier.
  2. L'entier est ensuite ajusté de la quantité spécifiée, qui peut être positive pour éclaircir la couleur ou négative pour l'assombrir.
  3. L'entier ajusté est reconverti en chaîne de couleur hexadécimale à l'aide d'une formule spécifique qui garantit que la couleur reste dans la plage valide.

Voici un extrait de code simplifié qui explique comment la couleur l'ajustement est effectué :

function LightenDarkenColor(col, amt) {
  col = parseInt(col, 16); // Convert hex color to integer
  col = col + amt; // Adjust the integer by the specified amount
  col = col.toString(16); // Convert the adjusted integer back to hex color
  return col;
}
Copier après la connexion

Dans la fonction fournie, il existe plusieurs versions du code, chacune avec de légères variations. La différence la plus notable réside entre les fonctions qui utilisent le mélange de journaux et le mélange linéaire. Le mélange de journaux produit généralement des ajustements de couleur plus subtils et plus naturels que le mélange linéaire.

Pour utiliser le programme, vous pouvez appeler la fonction LightenDarkenColor avec la couleur hexadécimale et la quantité d'ajustement souhaitées. Par exemple, pour éclaircir la couleur "3F6D2A" de 40, vous appelleriez :

LightenDarkenColor("3F6D2A", 40)
Copier après la connexion

Cela renverrait une nouvelle couleur hexadécimale qui est 40 unités plus claire que la couleur d'origine.

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal