生成互补色

需求及业务场景

突然又想起很久以前的一个需求，在首页Banner的位置，背景色可以通过管理系统动态配置，但是UI图默认的TAB菜单文字颜色为白色，这时候会出现一个问题，假如背景色也设置为浅色系，文字也是浅色，那么用户就完全看不清；同理，假如背景色为深色系，文字也是深色，同样看不清；

所以这时候就需要前端根据已有背景色，计算出文字到底是什么颜色才能让用户看得清晰、能无障碍使用；

例如：背景色为浅色，则文字颜色为深色；背景色为蓝色，则文字颜色就偏红一些，颜色互补、对比，肉眼能直接看清。

解决方案

直接上代码：

• 已发布在github上，点击查看；
• 已发布在npm上，可以直接在项目中安装使用，点击查看；

/**
 * @description: 得到互补色
 * @params originalColor: 原始色(16进制色)
 * @return String 互补色
 */
const func = (originalColor) => {
  let color = originalColor

  //去除#
  if (color.includes('#')) {
    color = color.substring(1)
  }

  //长度为3位的缩写值，转为完整6位值
  if (color.length === 3) {
    color = color.replace(/(\w)(\w)(\w)/, '$1$1$2$2$3$3')
  }

  const colorList = color.match(/\w{2}/g) //转为数组

  let result = []

  for (let i = 0; i < colorList.length; i++){
    let cur = 255 - parseInt(colorList[i], 16)
    cur = cur.toString(16)
    if (cur.length === 1) {
      cur = `0${cur}`
    }
    result.push(cur)
  }

  result = `#${result.join('')}`

  return result
}

export default func

原理

rgb颜色，范围为0~255，想得到互补色，其实就是255减去当前的色值，就会得到互补色。