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

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

网络异常,图片无法展示
|



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


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


所以笔者在这里就分享一下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=2421---->g: g的值就是: 2*16+1=33DD---->b: b的值就是: 13*16+13=221

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

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

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


4 RGB转HEX算法



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

constrgb2hex= (rgb: string):string=> {
letstr=rgb.replace(/rgb\((.*)\)/g, '$1')
letstrArr=str.split(',').map(t=>t.trim())
letresult:string[] = []
for(leti:number=0, len:number=strArr.length; i<len; i++) {
letcurVal=Number(strArr[i])
letleft=getHexStr(String(Math.floor(curVal/16)))
letright=getHexStr(String(Math.floor(curVal%16)))
result[i] =left+right  }
functiongetHexStr(v:string):string {
letstr: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    }
returnstr  }
return`#${result.join('')}`}

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


目录
相关文章
|
28天前
|
存储 算法 Java
解析HashSet的工作原理,揭示Set如何利用哈希算法和equals()方法确保元素唯一性,并通过示例代码展示了其“无重复”特性的具体应用
在Java中,Set接口以其独特的“无重复”特性脱颖而出。本文通过解析HashSet的工作原理,揭示Set如何利用哈希算法和equals()方法确保元素唯一性,并通过示例代码展示了其“无重复”特性的具体应用。
41 3
|
1月前
|
机器学习/深度学习 人工智能 自然语言处理
深度学习中的优化算法及其应用
【10月更文挑战第8天】 本文将探讨深度学习中常用的优化算法,包括梯度下降法、Adam和RMSProp等,介绍这些算法的基本原理与应用场景。通过实例分析,帮助读者更好地理解和应用这些优化算法,提高深度学习模型的训练效率与性能。
139 63
|
12天前
|
机器学习/深度学习 JSON 算法
二叉树遍历算法的应用场景有哪些?
【10月更文挑战第29天】二叉树遍历算法作为一种基础而重要的算法,在许多领域都有着不可或缺的应用,它为解决各种复杂的问题提供了有效的手段和思路。随着计算机科学的不断发展,二叉树遍历算法也在不断地被优化和扩展,以适应新的应用场景和需求。
23 0
|
23天前
|
存储 算法 搜索推荐
这些算法在实际应用中有哪些具体案例呢
【10月更文挑战第19天】这些算法在实际应用中有哪些具体案例呢
26 1
|
29天前
|
机器学习/深度学习 人工智能 算法
[大语言模型-算法优化] 微调技术-LoRA算法原理及优化应用详解
[大语言模型-算法优化] 微调技术-LoRA算法原理及优化应用详解
68 0
[大语言模型-算法优化] 微调技术-LoRA算法原理及优化应用详解
|
1月前
|
算法 安全 物联网
如何应用SM2算法进行身份认证
【10月更文挑战第5天】如何应用SM2算法进行身份认证
58 1
|
1月前
|
存储 算法 安全
SM2算法的应用场景有哪些?
【10月更文挑战第5天】SM2算法的应用场景有哪些?
67 1
|
23天前
|
监控 算法 数据挖掘
HyperLogLog算法有哪些应用场景呢
【10月更文挑战第19天】HyperLogLog算法有哪些应用场景呢
15 0
|
29天前
|
机器学习/深度学习 算法 数据建模
计算机前沿技术-人工智能算法-生成对抗网络-算法原理及应用实践
计算机前沿技术-人工智能算法-生成对抗网络-算法原理及应用实践
25 0