如何在 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中文网其他相关文章！