首頁 > web前端 > css教學 > 主體

如何根據淺色或深色生成給定顏色的相反顏色?

Susan Sarandon
發布: 2024-11-13 14:04:02
原創
931 人瀏覽過

How do you generate the opposite color of a given color in terms of light or dark?

從給定顏色產生相反的顏色

問題:

如何創建與給定顏色相反的顏色的顏色是明度還是暗度?如果目前顏色是黑色,我需要產生白色,反之亦然。

解決方案:

要實現此功能,我們可以利用涉及以下的演算法:以下步驟:

  1. 首先,我們將目前顏色從十六進位(HEX) 格式轉換為其等效的紅-綠-藍(RGB) 分量。
  2. 然後,我們反轉每個顏色透過從 255 中減去 R、G 和 B 分量的值來實現。
  3. 然後將反轉的 RGB 分量轉換回十六進位格式。
  4. 最後,我們根據需要用前導零填充每個十六進位分量以確保有效的輸出。

按照以下步驟,我們可以建立一個名為invertColor 的函數,它將當前的十六進位顏色作為輸入並傳回其相反的顏色:

function invertColor(hex) {
  // Convert HEX to RGB
  var r = parseInt(hex.slice(1, 3), 16);
  var g = parseInt(hex.slice(3, 5), 16);
  var b = parseInt(hex.slice(5, 7), 16);

  // Invert color components
  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);

  // Pad each with 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);
}
登入後複製

此函數考慮到需要反轉顏色以創建相反的明暗色調。

範例:

如果我們傳遞顏色「#F0F0F0」(a明亮的顏色)作為invertColor 函數的輸入,它將傳回「#202020」( )。

以上是如何根據淺色或深色生成給定顏色的相反顏色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板