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

Bagaimana Menjana Warna Bertentangan Warna Yang Diberikan?

Linda Hamilton
Lepaskan: 2024-11-19 21:44:02
asal
1049 orang telah melayarinya

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;
}
Salin selepas log masuk

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';
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan