JavaScript获取某个颜色更亮或更暗的颜色

Posted 2021-06-07 JIZQAQ

业务需求是，有一堆颜色可以供我选择，选了之后加一个边框表示已经被选择上了。边框颜色要比原本颜色更深一些。

开始是参考了下面这篇文章，来获得边框拿圈更深的颜色。

javascript对任意颜色获取更亮或更暗的颜色值

https://segmentfault.com/a/1190000010284529

但是遇到一点问题，大部分颜色看起来效果都挺好的。

但是个别颜色，明显获得到的颜色是有差异的

我打印了一下中间值，发现几个明显颜色不对的，都是r=0，然后转回16进制的时候发生了问题少了2位

于是我尝试了另外一种返回正确位数16进制颜色的方式，和直接返回了rgba格式的方式

getLightenDarkenColor2(col, amt) {
      if (col[0] == "#") {
        col = col.slice(1);
      }
      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;
      console.log("r",r)
      console.log("g",g)
      console.log("b",b)
      //return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
      //return "#"+parseInt(r, 10).toString(16)+parseInt(g, 10).toString(16)+parseInt(b, 10).toString(16)
      return `rgba(${r},${g},${b})`
    },

……然而不对的颜色变得更多了，有一半以上都出现了问题，懒得截全了

于是我理解了一下这段代码，这个函数会接收2个值，一个是16进制的颜色，一个是颜色的偏移值。偏移值为正则颜色变亮，反之变暗。大概思路就是先把拿到的16进制颜色转成rgb格式，然后rgb分辨都加上这个偏移值，最后再转会16进制的颜色展示。但是我想了想还要多写一段转回16进制的代码，实在有点懒，所以我最后返回的是rgba的格式。

hexToRgb(hex) {
  var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
},
getLightenDarkenColor(col, amt) {
  var result = this.hexToRgb(col)
  return `rgba(${result.r+amt},${result.g+amt},${result.b+amt})`
},

var darkerColor = this.getLightenDarkenColor(item, -30);

终于一切都变得正常了……

但是其实我看了一下，返回的rgba值有负数，按理来说rgb值应该在0-255才对，不过我chrome的确就看起来非常正常…

暂时这个问题也没想明白，别的浏览器暂时还没试有没有问题，如果有问题的话后续再更新。