javascript颜色处理方法集合

1、判断颜色深浅

/**
 * 判断颜色深浅
 * @param {array} color rgb数组
 * @returns 浅色模式-true  深色模式-false
 */
function colorMode(color) {
  let r1 = parseInt(color.substring(1, 3), 16)
  let g1 = parseInt(color.substring(3, 5), 16)
  let b1 = parseInt(color.substring(5, 7), 16)
  return 0.213 * r1 + 0.715 * g1 + 0.072 * b1 < 255 / 2;
}

2、两种颜色值叠加

/**
 * 两种颜色值叠加
 * @param {*} color1 颜色1
 * @param {*} color2 颜色1
 * @param {*} weight 权重
 * @returns 十六进制颜色值
 */
function colourMix(color1, color2, weight) {
  weight= Math.max(Math.min(Number(weight), 1), 0)
  let r1 = parseInt(color1.substring(1, 3), 16)
  let g1 = parseInt(color1.substring(3, 5), 16)
  let b1 = parseInt(color1.substring(5, 7), 16)
  let r2 = parseInt(color2.substring(1, 3), 16)
  let g2 = parseInt(color2.substring(3, 5), 16)
  let b2 = parseInt(color2.substring(5, 7), 16)
  let r = Math.round(r1 * (1 - weight) + r2 * weight)
  let g = Math.round(g1 * (1 - weight) + g2 * weight)
  let b = Math.round(b1 * (1 - weight) + b2 * weight)
  r = ('0' + (r || 0).toString(16)).slice(-2)
  g = ('0' + (g || 0).toString(16)).slice(-2)
  b = ('0' + (b || 0).toString(16)).slice(-2)
  return '#' + r + g + b
}

3、颜色RGBA值转十六进制值

function rgbaToHex(color) {
  var values = color
    .replace(/rgba?\(/, '')
    .replace(/\)/, '')
    .replace(/[\s+]/g, '')
    .split(',')
  var a = parseFloat(values[3] || 1),
    r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
    g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
    b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
  return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2)
}

4、颜色十六进制值转RGBA值

function hexToRgba(color, opacity = 100){
  var reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/
  if(!reg.test(color)){return;}
  let r = parseInt(color.substring(1, 3), 16)
  let g = parseInt(color.substring(3, 5), 16)
  let b = parseInt(color.substring(5, 7), 16)
  return `rgba(${r},${g}, ${b}, ${Number(opacity/100).toFixed(2)})`;
}

5、像素点最接近黑白红哪个颜色

/**
 * @param {*} r 
 * @param {*} g 
 * @param {*} b
 * @returns 0-黑，1-白，2-红
 */
function getNearestColor(r,g,b){
    let DistanceRed = (0xff - r)*(0xff - r) + g*g + b*b;
    let DistanceBlack = r*r + g*g + b*b;
    let DistanceWhite = (0xff - r)*(0xff - r) + (0xff - g)*(0xff - g) + (0xff - b)*(0xff - b);
    if(DistanceBlack<=DistanceRed && DistanceBlack<=DistanceWhite){
      return 0;
    }else if(DistanceRed<=DistanceBlack && DistanceRed<=DistanceWhite){
      return 2;
    }else{
      return 1;
    } 
},