Obeta

关于RGBA与HEX的一些了解

在开发sublime text 3插件ColorConvert的过程中发现一些很有意思的关于RGBA与HEX的细节.

ColorConvert是一个关于颜色转换色插件,支持各种颜色之间的互相转换,如果你是使用 sublime text 3,可以考虑试试.发布后不久就有人给我提意见和一些 issue,这篇博文就来自于这个issue,感兴趣可以去看看.

RGB illumination

RGB

RGB 是一种通过三种颜色(R:red, G:green, B:blue)叠加来得到各种颜色的标准, 也有三原色的叫法. 通常 RGB 一共有 256 级亮度,因此三种颜色叠加一共有256*256*256 = 16777216中颜色,也就是以前各种手机参数所说的 1670 万种颜色.

至于为何广泛使用了 RGB,这是因为人类眼睛里的识别颜色的锥形感光细胞他们决定的,感光细胞有好几种不同的类型,他们接受的不同的颜色刺激强度不同,产生了我们现在理解的颜色观.

因此不同的生物对于颜色的理解是不一样的,鸟类能感受四种不同的波长光线,而有些哺乳动物只有两种.

HEX

这个其实就是 RGB 的十六进制的写法#RRGGBB.

rgb 是通过十进制来描述的,比如rgb(255,255,255),其中的 255 是十进制,范围在(0~255),而如果转换为十六进制也就是 HEX 的时候就是#FFFFFF.如果你对于如何转换比较感兴趣,可以看看相关的文档或者直接阅读我那份 Python 源代码,关键的转换代码都在util.py里面.

关于透明度

起初 ColorConvert 对于RGBA转换为HEX会丢失透明度的值,后面发现其实并不是的,浏览器支持HEX的透明度值,对应的是HEXA,格式是#RRGGBBAA.

color: rgba(255, 255, 255, 0.5);
/* 转换为hex */
color: #ffffff80;

其它之前的都没有任何改变,只是在 hex 值#FFFFFF的后面加上透明度的十六进制值.

那么透明度的值是如何来的呢? 在这之前我们需要知道 RGBA 的透明度取值范围也是0~255,只是浏览器为了方便开发者所以定义了是一个百分比的数字(或小数),也就是 RGBA 原本格式是rgba(255,255,255,255).

那么上面的.5对应的是0.5 * 256 = 128, 这时候再讲128转换为十六进制就是一个80了.

这里提供一下大部分alpha值对应的十六进制:

100% - FF 95% - F2 90% - E6 85% - D9 80% - CC 75% - BF 70% - B3 65% - A6 60% -
99 55% - 8C 50% - 80 45% - 73 40% - 66 35% - 59 30% - 4D 25% - 40 20% - 33 15% -
26 10% - 1A 5% - 0D 0% - 00

另外的问题

上面所讲的都是基于浏览器能理解的,比如关于RGBA的透明度值,这是浏览器里能用的,但是其他时候是无法使用的,比如在 android 里的RGBA变成了ARGB, 透明度值是提前了的,因此对应的是六进制格式变成了#AARRGGBB.

这就会导致一些在 web 中正常的表现而到了 android 中就会奇怪的问题,比如#80FFFFFF在后面会被格式为#RRGGBBAA形式,但是 android 中这是错误的,因此会导致转换出错误的颜色.

所以 ColorConvert 增加了一个is_android配置来定义你的使用环境.

引用

个人随笔记录,内容不保证完全正确,若需要转载,请注明作者和出处.