任何一个和用户有交互的产品,都离不开颜色,你是否在设计稿或代码中或者任何一个标识颜色的地方看到过,比如:#FF00FF、#169、#CCFF00FF。
先介绍下RGB的基本原理,RGB是Red、Green、Blue三种颜色的缩写,叫做三原色(小学的图画课应该是学过的)。三种颜色以最大亮度进行混合的话,会变成白色,哇,好神奇。
整个理论以下图所示,假设在一个没有一点光的小黑屋里面,墙面展示为黑色,打开三束灯,分别红,绿,蓝,中间三种颜色交叉的地方,就形成了白色。也就是这些光会叠加产生效果,并混合成新的颜色。
当前无论手机还是计算机,究竟支持多少种颜色呢?答案是都达到了真彩色的标准,也就是支持1670w种颜色,已经超过了人眼能够分辨颜色的极限了,1670w这个数字怎么来的,一会儿我们一起推算。
一般一种颜色用8bit表示,也就是01010101这样8个二进制数,2的8次方是256,所以一个颜色就分为256级,从0到255,共256级,0表示黑色(红灯还没打开),255标识红色强度最大(红灯已全部打开),这个时候255对应的二进制为11111111(你如果懂二进制的知识的话,应该很好看懂),这样RGB三种颜色分别用8为表示的话,一共24位表示一个颜色,例如111111111111111111111111,表示了RGB都是255级的亮度,也就是表示了上图当中最中间交叉的那个部分,也就是表示了白色。
但是二进制表示计算机读起来比较容易,因为计算机处理的就是01的字串,但是人可读性并不好,所以人类用16进制来标识二进制,会所见01字串的长度,16进制的意思就是逢16进1,但是我们的阿拉伯数字最大是9,那对于10到15的六个数字分别用A,B,C,D,E,F来表示,1111应该用F来表示,所以白色用16进制表示为FFFFFF,在web开发或设计中,前面加上#号标识颜色,所以你就看到了文章开头介绍的颜色表示法#FFFFFF这样的形式,在CSS设计中,如果FF这样重叠的数字,可以再进行一次缩减标识为#FFF,类似#CCFF00FF前面的CC是表示的Alpha通道,即标识的透明度。
RGB三种颜色分别有256级亮度,那三种颜色的组合数就是256*256*256=16777216,也就是2的24次方,所以分别用8位RGB来表示的颜色数量公用1670w种颜色,足以覆盖人类眼睛的辨识程度。
再介绍下经常提到的位深度的概念,在windows系统中,右键属性一张图片,看详细信息,如下图:
这里面的位深度就是指一张图片内的一个像素是用多少位来表示的,如我们刚才介绍的RGB分别是8位,位深度就是24,这种图片叫做RGB24,当然这个只是指RGB总共的二进制位数,也有可能是32位叫做RGB32,除了RGB的24位,剩余的8为表示Alpha通道,也就是透明信息,当前的交互和动画展现,如果没有Alpha,那做起来应该都是比较生硬的,一般都会用Alpha表示渐隐渐显的效果,在图片中是用来将图片中层叠的概念表达的更加清楚。
一般有如下几种RGB格式,包括RGB565,RGB24,RGB32,ARGB8888,最后一种的A表示Alpha,跟刚才介绍的RGB32差不多一个意思。
像RGB565这种用16位表示一个颜色,那只能表示2的16次方,表达出65536种颜色,但是好处是非常节省内存(因为一个像素只用32位一半的数据就能存储了),但是会损失图片的清晰度,一般用于纯色图片或这本身颜色就比较少的图片,会大幅减少内存的占用。
本篇基本介绍了计算机中三原色的原理,及你见过的一些陌生的颜色值的表示方法,几个简单的推理方法,介绍了下位深度的概念。当内存和图片质量发生冲突时,可考虑设计上用纯色或极其简单的颜色来设计,然后将图片用更少的位数表达,这样会大幅节省内存,前提是设计上能够保持简洁并能够达到设计效果。
再跟大家算个帐,一张图片假设是1920*1080的大小,那这张图片至少要占用1920*1080*4字节的内存,也就是4Mb,也即一个带有alpha通道的图片,都会是这个大小,唯一有处理空间的是没有alpha,并且颜色比较简单的图,可以用RGB565来表达,这样可以减小一半的内存占用,对于程序性能来说,是不小的提升,难道内存,速度,性能指标不是产品设计当中的重要一环和重要的考量指标吗?