JavaScript hex 颜色渐变计算

由于需要实现下图需求，所以需要对某些颜色进行渐变计算。

效果

image.png

代码

export const getStepGradientColor = (startColor, step) => {
  const startRGB = colorRgb(startColor) // 转换为rgb数组模式
  const startR = startRGB[0]
  const startG = startRGB[1]
  const startB = startRGB[2]

  // RGB 差值
  const product = 0.6
  const sR = 0.75 * product
  const sG = 24 * product
  const sB = 27 * product

  return colorHex(
    'rgb(' +
    parseInt(sR * step + startR) +
    ',' +
    parseInt(sG * step + startG) +
    ',' +
    parseInt(sB * step + startB) +
    ')'
  )
}

export const colorRgb = function(oColor) {
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  var sColor = oColor.toLowerCase()
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      var sColorNew = '#'
      for (var i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
      }
      sColor = sColorNew
    }
    // 处理六位的颜色值
    var sColorChange = []
    for (let i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
    }
    return sColorChange
  } else {
    return sColor
  }
}

export const colorHex = function(rgb) {
  var _this = rgb
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  if (/^(rgb|RGB)/.test(_this)) {
    var aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
    var strHex = '#'
    for (var i = 0; i < aColor.length; i++) {
      var hex = Number(aColor[i]).toString(16)
      hex = hex < 10 ? 0 + '' + hex : hex // 保证每个rgb的值为2位
      if (hex === '0') {
        hex += hex
      }
      strHex += hex
    }
    if (strHex.length !== 7) {
      strHex = _this
    }
    return strHex
  } else if (reg.test(_this)) {
    var aNum = _this.replace(/#/, '').split('')
    if (aNum.length === 6) {
      return _this
    } else if (aNum.length === 3) {
      var numHex = '#'
      for (let i = 0; i < aNum.length; i += 1) {
        numHex += aNum[i] + aNum[i]
      }
      return numHex
    }
  } else {
    return _this
  }
}

最后再进行使用

function getChildrenColors() {
  const colors = ['#a24c4c', '#e3d4ae', '#fbb178', '#abce65', '#c45592']
  const result = []
  colors.forEach(color => {
    const group = []
    for (let i = 1; i <= 6; i++) {
      group.push(getStepGradientColor(color, i))
    }
    result.push(group)
  })
  return result
}

问题

当然，这种方法还是存在一些问题的，应该 RGB 最大值只有 255，但可能会出现超 255 的情况。
可以换种思路，通过开始和结束两个色值，取他们中间的均分值。这样更佳。

参考文章

• https://www.cnblogs.com/SweetMemory/p/6274388.html