Heim >Web-Frontend >CSS-Tutorial >Wie erzeugt man die Gegenfarbe einer bestimmten Farbe in Form von hell oder dunkel?

Wie erzeugt man die Gegenfarbe einer bestimmten Farbe in Form von hell oder dunkel?

Susan Sarandon
Susan SarandonOriginal
2024-11-13 14:04:02994Durchsuche

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

Generieren der Gegenfarbe aus einer gegebenen Farbe

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:

  1. Zunächst konvertieren wir die aktuelle Farbe vom Hexadezimalformat (HEX) in die entsprechenden Rot-Grün-Blau-Komponenten (RGB).
  2. Wir invertieren dann jede davon R-, G- und B-Komponenten, indem wir ihre Werte von 255 subtrahieren.
  3. Die invertierten RGB-Komponenten werden dann zurück in das HEX-Format konvertiert.
  4. Abschließend füllen wir jede HEX-Komponente bei Bedarf mit führenden Nullen auf um eine gültige Ausgabe sicherzustellen.

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn