Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erzeugt man die entgegengesetzte Farbe einer bestimmten Farbe?

Linda Hamilton
Freigeben: 2024-11-19 21:44:02
Original
987 Leute haben es durchsucht

How to Generate the Opposite Color of a Given Color?

Erzeugen der entgegengesetzten Farbe einer gegebenen Farbe

Bei diesem Problem besteht das Ziel darin, eine Farbe zu erzeugen, die das Gegenteil einer gegebenen Farbe ist Farbe. Die Gegenfarbe bezieht sich auf den dunklen/hellen Aspekt. Wenn die gegebene Farbe beispielsweise Schwarz ist, wäre die Gegenfarbe Weiß.

Um diese Gegenfarbe zu erzeugen, ist eine Funktion namens create_opp_color() erforderlich. Diese Funktion sollte die aktuelle Farbe als Argument akzeptieren und die entgegengesetzte Farbe zurückgeben. So gehen Sie diese Aufgabe an:

Funktionsimplementierung:

  1. HEX in RGB konvertieren: Die angegebene Farbe wird als in angenommen HEX-Format. Konvertieren Sie es zunächst in RGB-Komponenten.
  2. Farbkomponenten umkehren: Kehren Sie die Werte der R-, G- und B-Komponenten um (subtrahieren Sie von 255).
  3. Invertierte Komponenten in HEX umwandeln: Konvertieren Sie jede invertierte Komponente zurück in HEX-Werte.
  4. Invertierte Komponenten auffüllen: Jede HEX-Komponente sollte mit Nullen aufgefüllt werden, um sicherzustellen, dass sie zweistellig ist HEX-Wert.
  5. HEX-Farbzeichenfolge rekonstruieren: Verketten Sie die aufgefüllten HEX-Komponenten, um die entgegengesetzte Farbzeichenfolge zu bilden.

Implementierung in JavaScript:

function create_opp_color(currentColor) {
    if (currentColor.indexOf('#') === 0) {
        currentColor = currentColor.slice(1);
    }
    if (currentColor.length === 3) {
        currentColor = currentColor.repeat(2);
    }
    const rgb = hexToRgb(currentColor);
    const invertedRgb = {
        r: 255 - rgb.r,
        g: 255 - rgb.g,
        b: 255 - rgb.b
    };
    const invertedHex = rgbToHex(invertedRgb);
    return '#' + invertedHex;
}

function rgbToHex(rgb) {
    let hex = '';
    for (const key in rgb) {
        if (rgb.hasOwnProperty(key)) {
            const component = rgb[key].toString(16);
            hex += component.length === 1 ? '0' + component : component;
        }
    }
    return hex;
}

function hexToRgb(hex) {
    let rgb = {};
    ['r', 'g', 'b'].forEach((key, i) => {
        rgb[key] = parseInt(hex.substr(i * 2, 2), 16);
    });
    return rgb;
}
Nach dem Login kopieren

Fortgeschrittene Technik:

Wenn Sie mehr Kontrast benötigen, können Sie Schwarz oder Weiß als Gegenfarbe verwenden, basierend auf der Helligkeit der Originalfarbe. Hier ist eine modifizierte Funktion, um das zu tun:

function create_opp_color(currentColor) {
    if (currentColor.indexOf('#') === 0) {
        currentColor = currentColor.slice(1);
    }
    if (currentColor.length === 3) {
        currentColor = currentColor.repeat(2);
    }
    const rgb = hexToRgb(currentColor);
    const brightness = Math.round((rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114) / 255 * 100);

    return brightness > 50 ? '#000000' : '#FFFFFF';
}
Nach dem Login kopieren

Jetzt können Sie mit dieser Funktion ganz einfach die Gegenfarbe einer beliebigen Farbe erzeugen, egal ob sie hell oder dunkel ist.

Das obige ist der detaillierte Inhalt vonWie erzeugt man die entgegengesetzte Farbe einer bestimmten Farbe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage