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é ?
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 :
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); }
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!