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

徐小夕 等级 636 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互换算法的思考及应用

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

收藏
评论区

相关推荐

JavaScript 中的二叉树以及二叉搜索树的实现及应用
接下来让我们一起来探讨js数据结构中的树。这里的树类比现实生活中的树,有树干,树枝,在程序中树是一种数据结构,对于存储需要快速查找的数据非有用,它是一种分层数据的抽象模型。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点以及零个或多个子节点。如下所以为一个树结构:) (https://imghelloworld.osscnbe
记一次HEX和RGB互换算法的思考及应用
由于笔者最近在开发可视化平台,所以对动态编辑器这块做了一段时间的研究, 发现其中有个小模块的知识点比较有意思,所以在这里分享一下. 作为前端工程师, 我们平时在对接设计稿的时候, 是不是经常会涉及到颜色值的转换呢? 比如从HEX值转化到RGB值, 亦或者是从RGB值转换到HEX值, 这块在PhotoShop等设计软件中非常常见, 在做类似于画板, 设计类的
JavaScript sourceMap 笔记
js source map 建议打开一个真实的项目的sourceMap对照食用由于前端项目在网络中访问导致为了减少体积进行一系列优化操作,最后导致生产环境出问题无法定位到项目代码中的指定位置,使得调试变成一件很难得事。由此产生了Source Map。 它是个什么东西简单说,sourceMap就是一个文件,里面储存着位置信息。仔细点说,这个
Java的数值数据类型以及命名规范
一、Java中的数值数据类型 <table<tbody<tr<td width"75" valign"top" style"wordbreak: breakall;"<span style"backgroundcolor: rgb(255, 254, 213);"类型名<br</span</td<td width"299
TypeScript 4.2 有哪些新特性
TypeScript 4.2 发布了!对于不熟悉 TypeScript 的人来说,TypeScript 就是增加了静态类型和类型检查的 JavaScript。有了类型限制,你就可以精确的表达你的函数需要什么类型的参数以及返回什么类型的结果。同时,利用 TypeScript 的类型检查,你可以很容易避免一些常见错误,例如拼写错误或者忘记处理 null 和 un
全栈进阶:Nginx基本功能及其原理
<div class"output_wrapper" id"output_wrapper_id" style"fontsize: 16px; color: rgb(62, 62, 62); lineheight: 1.6; wordspacing: 0px; letterspacing: 0px; fontfamily: 'Helvetica
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
h5 - 总结及踩坑记录
这是近期的一个 h5 项目,由于某些原因,预览地址不能放出来。不过这不是重点,没有 demo 不就可以好好看文章了吗 哈哈哈~文中提到的 pixi 是 pixiJs,精灵是 pixiJs 中的概念。阅读本文假设你已经知道了这些东西,不过这在本篇文章中并没有太多关于这个库的内容觉得这篇文章有帮助到自己,就让它去收藏夹吃灰;觉得没用或觉得写的不好的,可以留下
JavaScript 是什么?
前言 引用《JavaScript 高级程序设计第四版》中说的话 ——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。 面试官:JavaScript 是什么? 我:
【MySQL笔记】正确的理解MySQL的MVCC及实现原理
MVCC多版本并发控制 如果觉得对你有帮助,能否点个赞或关个注,以示鼓励笔者呢?!!首先声明,MySQL的测试环境是5.7 前提概要 什么是MVCC 什么是当前读和快照读? 当前读,快照读和MVCC的关系 MVCC实现原理 隐式字段 undo日志 Read View(读视图)
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互
一篇文章带你了解JavaScript错误处理
大家好,我是前端进阶者。执行JavaScript代码时,可能会发生意想不到的错误。错误可以是程序员编写的编码错误,由于输入错误引起的错误以及其他不可预见的事情。因此,为了处理错误,JavaScript提供了4个关键字。一、JavaScript try ... catch语句try语句允许定义一个代码块,该代码块在执行时将进行错误测试,catch如果try块中
一篇文章带你了解CSS 文本样式
大家好,我是IT共享者,人称皮皮。这篇文章我们来讲讲CSS的文本样式。 一、文本颜色Color颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定: 十六进制值 如"#FF0000"。 一个RGB值 "RGB(255,0,0)"。 颜色的名称 如"红"。一个网页的文本颜色是指在主体内的选择:
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写