Bagaimana untuk Menjana Warna Bertentangan Kod Hex yang Diberikan?

Menjana Warna Bertentangan daripada Warna Diberi

Menentukan warna berlawanan daripada warna tertentu adalah keperluan yang kerap dalam reka bentuk web dan grafik. Ini menjadi penting apabila warna teks adalah dinamik dan warna latar belakang perlu dilaraskan untuk kebolehbacaan. Matlamat kami adalah untuk mencipta fungsi yang mengambil warna semasa dan menghasilkan sebaliknya, menghasilkan warna yang memberikan kontras tinggi dan keterlihatan teks yang jelas.

Algoritma untuk Menjana Warna Bertentangan

Untuk mencapai objektif kami, kami mencadangkan algoritma berikut:

1. Tukar warna semasa daripada format HEX kepada RGB. Ini melibatkan pengekstrakan Merah, Hijau dan Nilai biru daripada kod HEX.
2. Terbalikkan setiap komponen R, G dan B. Ini bermakna mengira (255 - komponen).
3. Tukar komponen terbalik kembali kepada format HEX.
4. Tampal setiap komponen HEX dengan sifar untuk memastikan ia mempunyai panjang dua aksara.
5. Keluarkan warna terbalik sebagai kod HEX.

Melaksanakan Algoritma dalam JavaScript

Di bawah ialah pelaksanaan JavaScript bagi algoritma yang digariskan:

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

Fungsi ini menerima kod warna HEX dan mengembalikan warna yang bertentangan. Sebagai contoh, jika kami membekalkan warna "#F0F0F0", kami akan mendapat "#0F0F0F" sebagai warna yang bertentangan.

Pilihan Lanjutan: Mempertimbangkan Kecerahan

Dalam beberapa kes, mungkin perlu untuk mempertimbangkan kecerahan warna apabila menghasilkan sebaliknya. Berikut ialah versi diubah suai bagi fungsi yang termasuk parameter bw:

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

Jika parameter bw ditetapkan kepada benar, fungsi akan kembali hitam jika warna yang diberikan adalah cerah (#000000) dan putih jika ia gelap (#FFFFFF). Jika tidak, ia akan menghasilkan warna yang bertentangan seperti sebelum ini.

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