如何在 JavaScript 中以程式設計方式使十六進位顏色變亮或變暗？

以程式設計方式使十六進位顏色（或RGB 和混合顏色）變亮或變暗

此函數允許您以程式設計方式使十六進制顏色變亮或變暗特定量。只需傳入一個字串（如“3F6D2A”）作為顏色，並傳入一個整數 amt 來表示變亮或變暗的量。若要變暗，請傳入負數（例如 -20）。

<code class="js">function LightenDarkenColor(col, amt) {
  col = parseInt(col, 16);
  return (((col & 0x0000FF) + amt) | ((((col >> 8) & 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16);
}

// TEST
console.log(LightenDarkenColor("3F6D2A", 40));

其他版本

更快更小的版本：

<code class="js">function LightenDarkenColor(col, amt) {
  var num = parseInt(col, 16);
  var r = (num >> 16) + amt;
  var b = ((num >> 8) & 0x00FF) + amt;
  var g = (num & 0x0000FF) + amt;
  var newColor = g | (b << 8) | (r << 16);
  return newColor.toString(16);
}

// TEST
console.log(LightenDarkenColor("3F6D2A", -40));

處理帶或不帶# 前綴的顏色：

<code class="js">function LightenDarkenColor(col, amt) {
    var usePound = false;
    if ( col[0] == "#" ) {
        col = col.slice(1);
        usePound = true;
    }

    var num = parseInt(col, 16);

    var r = (num >> 16) + amt;

    if ( r > 255 ) r = 255;
    else if  (r < 0) r = 0;

    var b = ((num >> 8) & 0x00FF) + amt;

    if ( b > 255 ) b = 255;
    else if  (b < 0) b = 0;

    var g = (num & 0x0000FF) + amt;

    if ( g > 255 ) g = 255;
    else if  ( g < 0 ) g = 0;

    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}</code>

用法

要使用該函數，只需傳入要變亮或變亮的十六進制顏色字符串即可變暗，以及您想要調整的量。例如，以下程式碼將顏色「3F6D2A」變亮 40：

<code class="js">const lightenedColor = LightenDarkenColor("3F6D2A", 40);
console.log(`Lightened Color: ${lightenedColor}`); // Output: 7FADEE</code>

效能

此函數的效能針對速度和大小進行了最佳化。它使用位元運算來操縱顏色值，這使得速度非常快。該函數也非常小，非常適合小型應用程式。

功能

• 將十六進位顏色變亮或變暗指定的量
• 處理顏色帶或不帶# 前綴
• 調整不正確的顏色值
• 傳回新顏色的十六進位字串表示形式

限制

• 此功能不會將顏色轉換為HSL 來正確調亮或調暗顏色。因此，結果可能與使用 HSL 的函數不同。

以上是如何在 JavaScript 中以程式設計方式使十六進位顏色變亮或變暗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！