Heim >Web-Frontend >CSS-Tutorial >Wie erzeugt man die Gegenfarbe einer bestimmten Farbe in Form von hell oder dunkel?
Problem:
Wie kann ich eine Farbe erzeugen, die das Gegenteil von ist die aktuelle Farbe in Bezug auf Helligkeit oder Dunkelheit? Wenn die aktuelle Farbe Schwarz ist, muss ich Weiß erzeugen und umgekehrt.
Lösung:
Um diese Funktionalität zu erreichen, können wir einen Algorithmus verwenden, der Folgendes beinhaltet folgenden Schritten:
Indem wir diese Schritte befolgen, können wir eine Funktion namens invertColor erstellen, die eine aktuelle HEX-Farbe als Eingabe verwendet und die entgegengesetzte Farbe zurückgibt:
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); }
Diese Funktion berücksichtigt die Notwendigkeit, Farben zu invertieren, um entgegengesetzte Helligkeits- oder Dunkelheitsschattierungen zu erzeugen.
Beispiel:
Wenn wir die Farbe „#F0F0F0“ übergeben (a Wenn Sie eine helle Farbe) als Eingabe für die Funktion „invertColor“ verwenden, wird „#202020“ (eine dunkle Farbe) zurückgegeben.
Das obige ist der detaillierte Inhalt vonWie erzeugt man die Gegenfarbe einer bestimmten Farbe in Form von hell oder dunkel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!