首页 > web前端 > js教程 > 正文

如何在 JavaScript 中以编程方式使十六进制颜色变亮或变暗?

Susan Sarandon
发布: 2024-11-05 14:05:02
原创
487 人浏览过

How can I programmatically lighten or darken a hex color in 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板