Maison > interface Web > tutoriel CSS > Comment générer la couleur opposée d'une couleur donnée en termes de clair ou d'obscurité ?

Comment générer la couleur opposée d'une couleur donnée en termes de clair ou d'obscurité ?

Susan Sarandon
Libérer: 2024-11-13 14:04:02
original
994 Les gens l'ont consulté

How do you generate the opposite color of a given color in terms of light or dark?

Générer la couleur opposée à partir d'une couleur donnée

Problème :

Comment puis-je créer une couleur opposée à la couleur actuelle en termes de clarté ou d'obscurité ? Si la couleur actuelle est le noir, je dois générer du blanc, et vice versa.

Solution :

Pour réaliser cette fonctionnalité, nous pouvons utiliser un algorithme qui implique le étapes suivantes :

  1. Dans un premier temps, nous convertissons la couleur actuelle du format hexadécimal (HEX) en son équivalent Rouge-Vert-Bleu (RVB) composants.
  2. Nous inversons ensuite chacun des composants R, V et B en soustrayant leurs valeurs de 255.
  3. Les composants RVB inversés sont ensuite reconvertis au format HEX.
  4. Enfin, nous complétons chaque composant HEX avec des zéros non significatifs si nécessaire pour garantir une sortie valide.

En suivant ces étapes, nous pouvons créer une fonction nommée invertColor qui prend une couleur HEX actuelle comme entrée et renvoie sa couleur opposée :

function invertColor(hex) {
  // Convert HEX to RGB
  var r = parseInt(hex.slice(1, 3), 16);
  var g = parseInt(hex.slice(3, 5), 16);
  var b = parseInt(hex.slice(5, 7), 16);

  // Invert color components
  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);

  // Pad each with zeros and return
  return "#" + padZero(r) + padZero(g) + padZero(b);
}

function padZero(str, len) {
  len = len || 2;
  var zeros = new Array(len).join("0");
  return (zeros + str).slice(-len);
}
Copier après la connexion

Cette fonction prend en compte la nécessité d'inverser les couleurs pour créer des nuances opposées de clarté ou d'obscurité .

Exemple :

Si on passe la couleur "#F0F0F0" (un brillant color) en entrée de la fonction invertColor, il renverrait "#202020" (une couleur sombre).

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