Rumah >hujung hadapan web >tutorial css >Bagaimana Menjana Warna Bertentangan Warna Yang Diberikan?

Bagaimana Menjana Warna Bertentangan Warna Yang Diberikan?

Linda Hamilton
Linda Hamiltonasal
2024-11-19 21:44:021059semak imbas

How to Generate the Opposite Color of a Given Color?

Mencipta Warna Bertentangan Warna Yang Diberi

Dalam masalah ini, matlamatnya adalah untuk menghasilkan warna yang bertentangan dengan warna yang diberikan warna. Warna bertentangan merujuk kepada aspek gelap/terang. Sebagai contoh, jika warna yang diberikan adalah hitam, warna bertentangan akan menjadi putih.

Untuk mencipta warna bertentangan ini, fungsi bernama create_opp_color() diperlukan. Fungsi ini harus menerima warna semasa sebagai hujah dan mengembalikan warna yang bertentangan. Begini cara untuk mendekati tugasan ini:

Pelaksanaan Fungsi:

  1. Tukar HEX kepada RGB: Warna yang diberikan diandaikan berada dalam Format HEX. Mula-mula, tukarkannya kepada komponen RGB.
  2. Terbalikkan Komponen Warna: Terbalikkan nilai komponen R, G dan B (tolak daripada 255).
  3. Tukar Komponen Terbalik kepada HEX: Tukarkan semula setiap komponen terbalik kepada nilai HEX.
  4. Komponen Terbalik Pad: Setiap komponen HEX hendaklah berlapik dengan sifar untuk memastikan ia adalah 2 digit Nilai HEX.
  5. Bina Semula Rentetan Warna HEX: Satukan komponen HEX berlapik untuk membentuk rentetan warna yang bertentangan.

Pelaksanaan dalam 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;
}

Teknik Lanjutan:

Jika anda memerlukan lebih kontras, anda boleh menggunakan hitam atau putih sebagai warna bertentangan berdasarkan kecerahan warna asal. Berikut ialah fungsi yang diubah suai untuk melakukannya:

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';
}

Kini, menggunakan fungsi ini, anda boleh menjana warna bertentangan dengan mana-mana warna tertentu, sama ada cerah atau gelap.

Atas ialah kandungan terperinci Bagaimana Menjana Warna Bertentangan Warna Yang Diberikan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn