如何產生給定十六進位代碼的相反顏色？

從給定顏色產生相反顏色

從給定顏色確定相反顏色是網頁和圖形設計中的常見要求。當文字顏色是動態的並且需要調整背景顏色以提高可讀性時，這一點變得至關重要。我們的目標是創建一個函數，獲取當前顏色並產生其相反顏色，從而產生提供高對比度和清晰文字可見性的顏色。

產生相反顏色的演算法

為了實現我們的目標，我們提出以下演算法：

1. 轉換當前顏色從十六進位格式轉換為RGB 格式。 這涉及從十六進位代碼中提取紅色、綠色和藍色值。
2. 反轉每個 R、G 和 B 分量。 這表示計算（255 - 分量）。
3. 將反轉分量轉換回十六進位格式。
4. 用零填充每個十六進位組件以確保其長度為兩個字元。
5. 將反轉的顏色作為十六進位程式碼輸出.

實作JavaScript 中的演算法

下面是概述演算法的JavaScript實現：

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

此函數接受十六進位顏色代碼並傳回其相反的顏色。例如，如果我們提供顏色“#F0F0F0”，我們將得到“#0F0F0F”作為相反顏色。

進階選項：考慮亮度

在某些情況下在某些情況下，在產生相反顏色時可能需要考慮顏色的亮度。這是包含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);
}

如果bw 參數設定為true，則如果給定顏色為淺色(#000000)，則函數將傳回黑色，如果給定顏色為淺色，則函數將傳回白色。很黑（#FFFFFF）。否則，它將產生與之前相反的顏色。

以上是如何產生給定十六進位代碼的相反顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！