Wie finde ich die Komplementärfarbe eines bestimmten Hex-Codes?

So bestimmen Sie die Komplementärfarbe für eine bestimmte Farbe

Das Ziel besteht darin, eine Farbe zu erzeugen, die das Gegenteil einer bestimmten Farbe ist. Wenn die aktuelle Farbe beispielsweise Schwarz ist, sollte die Gegenfarbe Weiß sein. Diese Aufgabe ist entscheidend, wenn Sie eine kontrastierende Hintergrundfarbe für einen Text mit einer dynamischen Farbe festlegen, um eine klare Sichtbarkeit zu gewährleisten.

Um dies zu erreichen, verwenden wir den folgenden Ansatz:

1. Konvertieren Sie die aktuelle Farbe vom Hexadezimalformat (HEX) in das Format Rot, Grün und Blau (RGB).
2. Invertieren Sie die R-, G- und B-Komponenten der RGB-Farbe, um die Komplementärwerte zu erhalten.
3. Konvertieren die invertierten Komponenten zurück in das HEX-Format.
4. Stellen Sie sicher, dass die HEX-Werte bei Bedarf mit führenden Nullen aufgefüllt werden.

Hier ist der Code zur Implementierung dieses Ansatzes:

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:

Eine erweiterte Version mit einer „BW“-Option ermöglicht es Ihnen anzugeben, ob das Ergebnis eher schwarz oder weiß sein soll, was für einen besseren Kontrast und eine bessere Lesbarkeit sorgt :

function invertColor(hex, bw) {
  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.');
  }
  var r = parseInt(hex.slice(0, 2), 16),
    g = parseInt(hex.slice(2, 4), 16),
    b = parseInt(hex.slice(4, 6), 16);
  if (bw) {
    // Formula to determine if the color is closer to black or white.
    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
      ? '#000000'
      : '#FFFFFF';
  }
  // Invert color components.
  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);
  // Pad each component with leading zeros and return.
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

Beispielausgabe:

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

Das obige ist der detaillierte Inhalt vonWie finde ich die Komplementärfarbe eines bestimmten Hex-Codes?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!