首页 >web前端 >js教程 >如何以编程方式调亮或调暗十六进制颜色、处理 RGB 颜色以及将颜色混合在一起?

如何以编程方式调亮或调暗十六进制颜色、处理 RGB 颜色以及将颜色混合在一起?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-05 07:15:02392浏览

How can I programmatically lighten or darken a HEX color, handle RGB colors, and blend colors together?

以编程方式使十六进制颜色(或 RGB 和混合颜色)变亮或变暗

问题

目标是创建一个函数,可以将十六进制颜色变亮或变暗特定量。此外,您想要处理 RGB 颜色并将颜色混合在一起。

解决方案

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

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

说明

此函数的工作原理是将十六进制颜色转换为整数,然后添加或减去每个 RGB 通道的指定数量,然后将结果转换回十六进制颜色。

增强

要增强功能,您可以添加错误处理和对不同颜色的支持颜色格式(RGB、HSL)。您还可以通过传入第二个颜色参数来添加将颜色混合在一起的功能。

这是改进版本:

<code class="javascript">function pSBC(p, c0, c1, l) {
  let r, g, b, P, f, t, h, i = parseInt;
  if (typeof(p) != "number" || p <-1 || p > 1 || typeof(c0) != "string" || (c0[0] != 'r' &amp;&amp; c0[0] != '#') || (c1 &amp;&amp; !a)) return null;
  if (!this.pSBCr) this.pSBCr = (d) => {
    let n = d.length, x = {};
    if (n > 9) {
      [r, g, b, a] = d = d.split(",");
      n = d.length;
      if (n < 3 || n > 4) return null;
      x.r = i(r[3] == "a" ? r.slice(5): r.slice(4), 16);
      x.g = i(g);
      x.b = i(b);
      x.a = a ? parseFloat(a) : -1;
    } else {
      if (n == 8 || n == 6 || n < 4) return null;
      if (n < 6) d = "#" + d[1] + d[1] + d[2] + d[2] + d[3] + d[3] + (n > 4 ? d[4] + d[4] : "");
      d = i(d.slice(1), 16);
      if (n == 9 || n == 5) x.r = d >> 24 &amp; 255, x.g = d >> 16 &amp; 255, x.b = d >> 8 &amp; 255, x.a = m((d &amp; 255) / 0.255) /1000;
      else x.r = d >> 16, x.g = d >> 8 &amp; 255, x.b = d &amp; 255, x.a = -1;
    }
    return x;
  };

  h = c0.length > 9;
  h = a ? c1.length > 9 ? true : c1 == "c"?!h : false : h;
  f = this.pSBCr(c0);
  P = p < 0;
  t = c1 &amp;&amp; c1 != "c" ? this.pSBCr(c1) : P ? {r:0,g:0,b:0,a:-1} : {r:255,g:255,b:255,a:-1};
  p = P ? p*-1 : p;
  P = 1-p;
  if (!f || !t) return null;
  if (l) r = m(P*f.r + p*t.r), g = m(P*f.g + p*t.g), b = m(P*f.b + p*t.b);
  else r = m((P*f.r**2 + p*t.r**2)**0.5), g = m((P*f.g**2 + p*t.g**2)**0.5), b = m((P*f.b**2 + p*t.b**2)**0.5);
  a = f.a, t = t.a, f= a >= 0 || t >= 0, a = f ? a < 0 ? t : t < 0 ? a : a*P + t*p : 0;
  if (h) return "rgb" + (f ? "a(" : "(") +r + "," +g + "," +b + (f ? "," + m(a*1000)/1000 : "") + ")";
  else return "#" + (4294967296+r*16777216+g*65536+b*256+(f ? m(a*255):0)).toString(16).slice(1, (f? undefined : -2));
}</code>

此改进版本包括以下功能:

  • 错误处理:函数检查无效输入,如果输入无效则返回 null。
  • 支持不同的颜色格式:函数支持十六进制、RGB 和 RGBA 颜色格式。
  • 颜色混合:您可以通过传入第二个颜色参数将两种颜色混合在一起。
  • 线性或对数Blending:可以通过传入第四个参数来指定是使用线性还是对数混合。
  • Alpha通道支持:函数支持Alpha通道,可以混合Alpha通道混合颜色时一起。

以上是如何以编程方式调亮或调暗十六进制颜色、处理 RGB 颜色以及将颜色混合在一起?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn