给你点儿“颜色”瞧瞧

来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

任何一个和用户有交互的产品，都离不开颜色，你是否在设计稿或代码中或者任何一个标识颜色的地方看到过，比如：#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来表达，这样可以减小一半的内存占用，对于程序性能来说，是不小的提升，难道内存，速度，性能指标不是产品设计当中的重要一环和重要的考量指标吗？

颜色知识十分简单，希望以后不要对颜色感觉到任何陌生。

#专栏作家#

给产品经理讲技术，微信公众号（pm_teacher），人人都是产品经理专栏作家。资深程序猿，专注客户端开发若干年，对前端、后台技术略懂，热衷于对新的科技领域的探索。