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

徐小夕 等级 873 0 0

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

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

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

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

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

所以笔者在这里就分享一下HEXRGB之间相互转换的原理和算法, 并且实现随机生成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 140/16 8 12
8 8/16 0 8

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

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

3 HEX转RGB算法

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

#1821DD ----------> rgb:

18 ----> r: r的值就是: 1 * 16 + 8 = 24

21 ----> g: g的值就是: 2 * 16 + 1 = 33

DD ----> b: b的值就是: 13 * 16 + 13 = 221

以上转换的结果为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]})`
}

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

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('')}`
}

以上就是反转的算法, 大家掌握了吗?接下来我们来聊聊它的应用场景.

5 应用场景

其实颜色单位互换应用在很多领域, 笔者先罗列几个实际场景:

  • 单位换算工具

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

  • WEB IDE调色板

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

  • 动态背景

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

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

其实还有很多应用, 大家可以自行发挥哈, 今天的学习就到这了, 请问今天你又博学了吗?

收藏
评论区

相关推荐

记一次HEX和RGB互换算法的思考及应用
由于笔者最近在开发可视化平台,所以对动态编辑器这块做了一段时间的研究, 发现其中有个小模块的知识点比较有意思,所以在这里分享一下. 作为前端工程师, 我们平时在对接设计稿的时候, 是不是经常会涉及到颜色值的转换呢? 比如从HEX值转化到RGB值, 亦或者是从RGB值转换到HEX值, 这块在PhotoShop等设计软件中非常常见, 在做类似于画板, 设计类的
Python 练手 &quot;小例子&quot; 闯关60题!
一、 数字1 求绝对值绝对值或复数的模In [1]: abs(6)Out[1]: 62 进制转化十进制转换为二进制: In [2]: bin(10)Out[2]: '0b1010'十进制转换为八进制: In [3]: oct(9)Out[3]: '0o11'十进制转换为十六进制: In [4]: hex(15)Out[4]: '0xf'3 整数和ASCII互
HEX和ASCII的相互转换
#define CHAR\_TO\_UPPER(ch)   ((ch >= 'a' && ch <= 'z')?(ch-0x20):ch) /\*\*   \* @brief ascii convert hex   \* @par param\[in\] \*hex:hex data   \* @par param\[in\] \*ascii:
java 中 16 进制 HEX 转换成字节码形式的 UTF
恩,又碰到个蛋疼的编码转换问题了:要把形如 \\xE9\\xBB 的字符串转成中文。。。 在python中我们直接 print "\\xE9\\xBB\\x84" 即可, 在shell中我们直接 echo $'\\xe9\\xbb\\x84' #echo -e '\\xe9\\xbb\\x84'也行, 注意:不能直接 echo $'\\xde\\xab
MySQL 8.0.19客户端的一个小变化
> 不注意到这个变化的话,还挺折腾人的。 在MySQL 8.0.19 Release Notes里,有这么一段话: > When the mysql client operates in interactive mode, the --binary-as-hex option now is enabled by default. In addition,
mysql point WKB格式 php 解析 unpack
SET @g = ST_GeomFromText('POINT(118.624653 31.919936)'); SELECT HEX(@g); 输出: 00000000 01 01000000 A435069D10B55D40 26C5C72764FB3F40 Internal Geometry Storage Format [htt
mysql常用函数大全
一、数学函数 ABS(x) 返回x的绝对值 BIN(x) 返回x的二进制(OCT返回八进制,HEX返回十六进制) CEILING(x) 返回大于x的最小整数值 EXP(x) 返回值e(自然对数的底)的x次方 FLOOR(x) 返回小于x的最大整数值 GREATEST(x1,x2,...,xn)返回集合中最大的值 LEAST(x1,
AndNext接口Java测试
这个文章的目的是, 我希望用postman测试一下andnext的接口, 结果发现里面有几个小问题, 折腾了一下(确切的说是折腾了一天). 1\. 是之前文档里面写道, 敏感数据, 比如注册用的密码, 需要加密, 加密方法是Base64, 我试了直接Base64, 拿来加密, 根本不行, 仔细看了一下, 加上后来看了新的在线的文档, 说是"HEX", 就是
C# byte[] 转换hex(16进制字符串)
**1.byte\[\] 转换hex(16进制字符串)**    1.1 BitConverter方式 var str = DateTime.Now.ToString(); var encode = Encoding.UTF8; var bytes = encode.GetBytes
HTML5 canvas标签详解
转载: <**canvas**\>是**html5**当中的一个标签,通过Javascript来画图。 <canvas id=”canvas” width=”150″ height=”150″></canvas> <script> var canvas = document.getElementById(”canvas”); var ctx = c
IDA Pro
原文地址:[Reversing C++ programs with IDA pro and Hex-rays](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fblog.0xbadc0de.be%2Farchives%2F67) 简介 == 在假期期间,我花了很多时间学习和逆向用C++写
Navicat 查看二进制数据BLOB、BINARY等。
查看mysql的二进制数据,开源使用Navicat查看,点击`查看-->显示-->原始数据模式`如下: ![](https://oscimg.oschina.net/oscnet/up-7fdfd50bb9e84619c312e4e527f35c684fa.png) 用sql语句查询可以使用下面的语句: SELECT * FROM 表名 W
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
↓ 2进制 8进制 10进制 16进制 2进制 \- bin(int(x, 8)) bin(int(x, 10)) bin(int(x, 16)) 8进制 oct(int(x, 2)) \- oct(int(x, 10)) oct(int(x, 16)) 10进制 int(x, 2) int(x, 8) \- int(x
Qt之JSON生成与解析
<p><!--StartFragment--><span style="color: rgb(73, 73, 73); font-family: simsun; font-size: 14px; line-height: 21px; widows: 1; background-color: rgb(226, 226, 226);">&nbsp;JSON(Ja
sql server用户密码批量MD5加密
nodejs自带加密模块md5加密: var crypto = require('crypto'); function cryptoMD5(content){ var md5 = crypto.createHash('md5'); md5.update(content); retur