前端实现rgb、rgba、argb、hex颜色相互转换的原理

内容分享3小时前发布
0 0 0

前言

以前开发页面的时候用到的颜色一般直接写hex或者rgb
gba。如白色的表明可以是:
#fff或者#ffffff, rgb(255,255,255), rgba(255, 255, 255, 1)

我一般常用都是这么写,也没有研究过他们是啥关系,直到目前有个需求是导出excel的时候需要设置单元格的背景色、字体色的时候,而且规定只能是argb格式的,我一下子懵了,我前端只用过hex
gba,argb又是啥?或者hex
gba怎么转argb呢?

转换原理

拿白色来举例

  • hex: #fff 或者#ffffff
  • rgba: rgba(255, 255, 255, 1)
  • argb: argb(1, 255, 255, 255)

不过我们前端是不用argb的,只用rgba在这种。

一图胜千言

前端实现rgb、rgba、argb、hex颜色相互转换的原理

回到我的需求需要argb格式的时候,那么是否可以直接拿argb(1, 255, 255, 255)呢,并不是,它要的是hex形式表明的argb,所以如果输入的是rgba(255,255,255,1)的话还是要先转换成hex #ffffffff,再把a那部分挪到前面,在这里8个字母都是ff所以看不出来。最终输出 {argb:ffffffff}给到excel。

问题:如果hex是3位表明怎么转换成rgba?很简单,先分成3份,每份两个字母,如#ff0 -> #ffff00

© 版权声明

相关文章

暂无评论

none
暂无评论...