Wie generiert man die entgegengesetzte Farbe eines gegebenen Hex-Codes?

Generieren der Gegenfarbe aus einer gegebenen Farbe

Die Bestimmung der Gegenfarbe aus einer gegebenen Farbe ist eine häufige Anforderung im Web- und Grafikdesign. Dies ist von entscheidender Bedeutung, wenn die Textfarbe dynamisch ist und die Hintergrundfarbe zur besseren Lesbarkeit angepasst werden muss. Unser Ziel ist es, eine Funktion zu erstellen, die die aktuelle Farbe annimmt und ihr Gegenteil erzeugt, was zu einer Farbe führt, die hohen Kontrast und klare Textsichtbarkeit bietet.

Ein Algorithmus zum Erzeugen der entgegengesetzten Farbe

Um unser Ziel zu erreichen, schlagen wir den folgenden Algorithmus vor:

1. Konvertieren Sie die aktuelle Farbe von HEX in RGB-Format. Dies beinhaltet das Extrahieren der Rot-, Grün- und Blauwerte aus dem HEX-Code.
2. Invertieren Sie jede der R-, G- und B-Komponenten. Dies bedeutet, dass ( 255 - Komponente).
3. Konvertieren Sie die invertierten Komponenten zurück in HEX Format.
4. Fügen Sie jede HEX-Komponente mit Nullen auf, um sicherzustellen, dass sie eine Länge von zwei Zeichen hat.
5. Geben Sie die invertierte Farbe als HEX-Code aus .

Implementierung des Algorithmus in JavaScript

Unten finden Sie eine JavaScript-Implementierung des beschriebenen Algorithmus:

function invertColor(hex) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  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 = (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);
  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 akzeptiert einen HEX-Farbcode und gibt die entgegengesetzte Farbe zurück. Wenn wir beispielsweise die Farbe „#F0F0F0“ angeben, erhalten wir „#0F0F0F“ als Gegenfarbe.

Erweiterte Option: Berücksichtigung der Helligkeit

In einigen Fällen In einigen Fällen kann es erforderlich sein, bei der Erzeugung des Gegenteils die Helligkeit der Farbe zu berücksichtigen. Hier ist eine modifizierte Version der Funktion, die einen bw-Parameter enthält:

function invertColor(hex, bw) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  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) {
    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
      ? '#000000'
      : '#FFFFFF';
  }

  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

Wenn der bw-Parameter auf „true“ gesetzt ist, gibt die Funktion Schwarz zurück, wenn die angegebene Farbe hell ist (#000000), und weiß, wenn dies der Fall ist ist dunkel (#FFFFFF). Andernfalls wird die entgegengesetzte Farbe wie zuvor erzeugt.

Das obige ist der detaillierte Inhalt vonWie generiert man die entgegengesetzte Farbe eines gegebenen Hex-Codes?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!