wie man die komplementäre Farbe für eine bestimmte Farbe ermittelt

Das Ziel ist es, eine Farbe zu generieren, die einer bestimmten Farbe entgegengesetzt ist. Wenn beispielsweise die aktuelle Farbe schwarz ist, sollte das Gegenteil weiß sein. Diese Aufgabe ist entscheidend, wenn eine kontrastierende Hintergrundfarbe für einen Text mit einer dynamischen Farbe festgelegt wird, um eine klare Sichtbarkeit zu gewährleisten.

Um dies zu erreichen, verwenden wir den folgenden Ansatz:

1. konvertieren die aktuelle Farbe von hexadezimal (hex) in rot, grün und blau (rgb). RGB -Farbe, um die komplementären Werte zu erhalten.
2. konvertieren die invertierten Komponenten in das Hex -Format zurück. if (hex.indexof ('#') === 0) { hex = hex.lice (1); } // 3-stellige Sechskant in 6-stellige Konvertiten konvertieren. if (hex.length === 3) { hex = hex [0] hex [0] hex [1] hex [1] hex [2] hex [2]; } if (hex.length! == 6) { Neuen Fehler werfen ('Ungültige Sechskantfarbe.'); } // Farbkomponenten invertieren. var r = (255 - ParseInt (hex.slice (0, 2), 16)). ToString (16), g = (255 - ParseInt (Hex.Slice (2, 4), 16)). ToString (16), B = (255 - ParseInt (Hex.Slice (4, 6), 16)). Tostring (16); // pad jede Komponente mit führenden Nullen und kehrt zurück. Return '#' Padzero (R) Padzero (g) Padzero (b); } Funktion padzero (str, len) { len = len || 2; var Zeros = New Array (Len) .Join ('0'); return (nulos str) .lice (-len); }
3. Beispielausgabe:

Eine erweiterte Version mit einer "bw" -Option erlaubt Ihnen, festzustellen, ob das Ergebnis näher an Schwarz oder Weiß sein sollte, und bietet einen besseren Kontrast für eine verbesserte Lesbarkeit:

function invertColor(hex) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  // Convert 3-digit HEX to 6-digits.
  if (hex.length === 3) {
    hex = hex[0]   hex[0]   hex[1]   hex[1]   hex[2]   hex[2];
  }
  if (hex.length !== 6) {
    throw new Error('Invalid HEX color.');
  }
  // Invert color components.
  var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
    g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
    b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
  // Pad each component with leading 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);
}

Beispielausgabe:

[] (https://stackshare.io/resources/color-contrast-checker)