记一次 HEX 和 RGB 互换算法的思考及应用

关注

发布于: 2020 年 11 月 23 日

由于笔者最近在开发可视化平台,所以对动态编辑器这块做了一段时间的研究, 发现其中有个小模块的知识点比较有意思,所以在这里分享一下.

作为前端工程师, 我们平时在对接设计稿的时候, 是不是经常会涉及到颜色值的转换呢? 比如从 HEX 值转化到 RGB 值, 亦或者是从 RGB 值转换到 HEX 值, 这块在 PhotoShop 等设计软件中非常常见, 在做类似于画板, 设计类的 IDE 的时候也经常会用到它们的互相转换, 还有一种场景是,为了满足老板对高大上特效的要求, 我们要让动画在不同的时间显示不同的颜色,而且有过渡效果(过渡效果虽然可以通过 transiton 来实现),如下:

所以笔者在这里就分享一下 HEX 与 RGB 之间相互转换的原理和算法, 并且实现随机生成 HEX 值和随机生成 RGB 值的函数,最后带着大家深度理解和掌握颜色领域的应用.

1 文章摘要

HEX 与 16 进制
HEX 转 RGB 算法
RGB 转 HEX 算法
应用场景

2 HEX(16 进制)

十六进制（英文名称：Hexadecimal），是计算机中数据的一种表示方法。和我们平常的表示法不一样。它由 0-9，A-F 组成，字母不区分大小写。与 10 进制的对应关系是：0-9 对应 0-9；A-F 对应 10-15；N 进制的数可以用 0~(N-1)的数表示，超过 9 的用字母 A-F。

以上概念非常重要, 这也是我们转换 RGB 的关键. 还有一个知识点需要我们掌握的就是进制转换. 在计算机基础中我们都知道如何将二进制转化为十进制, 10 进制数转换成 16 进制的方法，和转换为 2 进制的方法类似，唯一的变化：除数由 2 变成 16. 举个例子, 我们拿 140 来举例:

所以 140 转换为 16 进制，结果为：7E (由十六进制的定义我们知道 14 对应的字母为 E)

以上就是掌握 HEX 和 RGB 互相转换的核心知识点, 接下来我们来看看互相转换的算法实现.

3 HEX 转 RGB 算法

从 HEX 颜色值转换成 RGB 颜色值，本质上是 HEX 的第一位数乘以 16 加上第二位数. 举个例子: 转换颜色为 #1821DD 的 HEX 值到 RGB 值.

以上转换的结果为 rgb: (24, 33, 221), 怎么样, 是不是很简单? 接下来我们来看看具体的算法实现:

const hex2rgb = (hex: string = ''):string => {  //  针对于传入错误的hex,即长度不等于7或者不等于4的  if(![4,7].includes(hex.length)) {    throw new Error('格式错误')   }
  let result = hex.slice(1)
  // 如果是颜色叠值, 统一转换成6位颜色值  if(result.length === 3) {    result = result.split('').map(a => `${a}${a}`).join('')  }
  const rgb:number[] = []
  // 计算hex值  for(let i=0, len = result.length; i< len; i+=2) {    rgb[i / 2] = getHexVal(result[i]) * 16 + getHexVal(result[i+1])  }
  function getHexVal(letter:string):number {    let num:number = -1;    switch(letter.toUpperCase()) {      case "A":        num = 10        break;      case "B":        num = 11        break;      case "C":        num = 12        break;      case "D":        num = 13        break;      case "E":        num = 14        break;      case "F":        num = 15        break;    }
    if(num < 0) {      num = Number(letter)    }
    return num  }
  return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`}

复制代码

当然还有更其他方法可以实现 REX 转 RGB, 大家可以自行探索.

4 RGB 转 HEX 算法

对于 RGB 转 HEX, 方法类似, 只不过相当于上述方法的逆运算, 笔者实现一种思路, 大家可以参考学习:

const rgb2hex = (rgb: string):string => {  let str = rgb.replace(/rgb\((.*)\)/g, '$1')  let strArr = str.split(',').map(t => t.trim())
  let result:string[] = []
  for(let i:number = 0, len:number = strArr.length; i < len; i++) {    let curVal = Number(strArr[i])    let left = getHexStr(String(Math.floor(curVal / 16)))    let right = getHexStr(String(Math.floor(curVal % 16)))    result[i] = left  + right  }
  function getHexStr(v:string):string {    let str:string = '';    switch(v) {      case '10':        str = "A"        break;      case '11':        str = "B"        break;      case '12':        str = "C"        break;      case '13':        str = "D"        break;      case '14':        str = "E"        break;      case '15':        str = "F"        break;    }
    if(!str) {      str = v    }
    return str  }
  return `#${result.join('')}`}