Bagaimana untuk Mencari Warna Pelengkap Kod Hex yang Diberikan?

Cara Menentukan Warna Pelengkap untuk Warna Diberi

Matlamatnya adalah untuk menghasilkan warna yang bertentangan dengan warna tertentu. Sebagai contoh, jika warna semasa adalah hitam, sebaliknya harus putih. Tugas ini adalah penting apabila menetapkan warna latar belakang yang kontras untuk teks dengan warna dinamik untuk memastikan keterlihatan yang jelas.

Untuk mencapainya, kami menggunakan pendekatan berikut:

1. Tukar arus warna daripada heksadesimal (HEX) kepada format Merah, Hijau dan Biru (RGB).
2. Terbalikkan komponen R, G dan B warna RGB kepada dapatkan nilai pelengkap.
3. Tukar semula komponen terbalik ke dalam format HEX.
4. Pastikan nilai HEX dilapisi dengan sifar pendahuluan jika perlu.

Ini kod untuk melaksanakan pendekatan ini:

function invertColor(hex) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  // Convert 3-digit HEX to 6-digits.
  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.');
  }
  // Invert color components.
  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);
  // Pad each component with leading zeros and return.
  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);
}

Contoh Output:

Versi lanjutan dengan pilihan "bw" membolehkan anda menentukan sama ada hasilnya harus lebih hampir kepada hitam atau putih, memberikan kontras yang lebih baik untuk kebolehbacaan yang dipertingkatkan:

function invertColor(hex, bw) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  // Convert 3-digit HEX to 6-digits.
  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) {
    // Formula to determine if the color is closer to black or white.
    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
      ? '#000000'
      : '#FFFFFF';
  }
  // Invert color components.
  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);
  // Pad each component with leading zeros and return.
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

Contoh Output:

[](https://stackshare.io/resources/color-contrast-checker)

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