任何一個和用戶有交互的產(chǎn)品，都離不開顏色，你是否在設(shè)計(jì)稿或代碼中或者任何一個標(biāo)識顏色的地方看到過，比如：#FF00FF、#169、#CCFF00FF。

先介紹下RGB的基本原理，RGB是Red、Green、Blue三種顏色的縮寫，叫做三原色（小學(xué)的圖畫課應(yīng)該是學(xué)過的）。三種顏色以最大亮度進(jìn)行混合的話，會變成白色，哇，好神奇。

整個理論以下圖所示，假設(shè)在一個沒有一點(diǎn)光的小黑屋里面，墻面展示為黑色，打開三束燈，分別紅，綠，藍(lán)，中間三種顏色交叉的地方，就形成了白色。也就是這些光會疊加產(chǎn)生效果，并混合成新的顏色。

當(dāng)前無論手機(jī)還是計(jì)算機(jī)，究竟支持多少種顏色呢？答案是都達(dá)到了真彩色的標(biāo)準(zhǔn)，也就是支持1670w種顏色，已經(jīng)超過了人眼能夠分辨顏色的極限了，1670w這個數(shù)字怎么來的，一會兒我們一起推算。

一般一種顏色用8bit表示，也就是01010101這樣8個二進(jìn)制數(shù)，2的8次方是256，所以一個顏色就分為256級，從0到255，共256級，0表示黑色（紅燈還沒打開），255標(biāo)識紅色強(qiáng)度最大（紅燈已全部打開），這個時候255對應(yīng)的二進(jìn)制為11111111（你如果懂二進(jìn)制的知識的話，應(yīng)該很好看懂），這樣RGB三種顏色分別用8為表示的話，一共24位表示一個顏色，例如111111111111111111111111，表示了RGB都是255級的亮度，也就是表示了上圖當(dāng)中最中間交叉的那個部分，也就是表示了白色。

但是二進(jìn)制表示計(jì)算機(jī)讀起來比較容易，因?yàn)橛?jì)算機(jī)處理的就是01的字串，但是人可讀性并不好，所以人類用16進(jìn)制來標(biāo)識二進(jìn)制，會所見01字串的長度，16進(jìn)制的意思就是逢16進(jìn)1，但是我們的阿拉伯?dāng)?shù)字最大是9，那對于10到15的六個數(shù)字分別用A,B,C,D,E,F來表示，1111應(yīng)該用F來表示，所以白色用16進(jìn)制表示為FFFFFF，在web開發(fā)或設(shè)計(jì)中，前面加上#號標(biāo)識顏色，所以你就看到了文章開頭介紹的顏色表示法#FFFFFF這樣的形式，在CSS設(shè)計(jì)中，如果FF這樣重疊的數(shù)字，可以再進(jìn)行一次縮減標(biāo)識為#FFF，類似#CCFF00FF前面的CC是表示的Alpha通道，即標(biāo)識的透明度。

RGB三種顏色分別有256級亮度，那三種顏色的組合數(shù)就是256*256*256=16777216，也就是2的24次方，所以分別用8位RGB來表示的顏色數(shù)量公用1670w種顏色，足以覆蓋人類眼睛的辨識程度。

再介紹下經(jīng)常提到的位深度的概念，在windows系統(tǒng)中，右鍵屬性一張圖片，看詳細(xì)信息，如下圖：

這里面的位深度就是指一張圖片內(nèi)的一個像素是用多少位來表示的，如我們剛才介紹的RGB分別是8位，位深度就是24，這種圖片叫做RGB24，當(dāng)然這個只是指RGB總共的二進(jìn)制位數(shù)，也有可能是32位叫做RGB32，除了RGB的24位，剩余的8為表示Alpha通道，也就是透明信息，當(dāng)前的交互和動畫展現(xiàn)，如果沒有Alpha，那做起來應(yīng)該都是比較生硬的，一般都會用Alpha表示漸隱漸顯的效果，在圖片中是用來將圖片中層疊的概念表達(dá)的更加清楚。

一般有如下幾種RGB格式，包括RGB565，RGB24，RGB32，ARGB8888，最后一種的A表示Alpha，跟剛才介紹的RGB32差不多一個意思。

像RGB565這種用16位表示一個顏色，那只能表示2的16次方，表達(dá)出65536種顏色，但是好處是非常節(jié)省內(nèi)存（因?yàn)橐粋€像素只用32位一半的數(shù)據(jù)就能存儲了），但是會損失圖片的清晰度，一般用于純色圖片或這本身顏色就比較少的圖片，會大幅減少內(nèi)存的占用。

本篇基本介紹了計(jì)算機(jī)中三原色的原理，及你見過的一些陌生的顏色值的表示方法，幾個簡單的推理方法，介紹了下位深度的概念。當(dāng)內(nèi)存和圖片質(zhì)量發(fā)生沖突時，可考慮設(shè)計(jì)上用純色或極其簡單的顏色來設(shè)計(jì)，然后將圖片用更少的位數(shù)表達(dá)，這樣會大幅節(jié)省內(nèi)存，前提是設(shè)計(jì)上能夠保持簡潔并能夠達(dá)到設(shè)計(jì)效果。

再跟大家算個帳，一張圖片假設(shè)是1920*1080的大小，那這張圖片至少要占用1920*1080*4字節(jié)的內(nèi)存，也就是4Mb，也即一個帶有alpha通道的圖片，都會是這個大小，唯一有處理空間的是沒有alpha，并且顏色比較簡單的圖，可以用RGB565來表達(dá)，這樣可以減小一半的內(nèi)存占用，對于程序性能來說，是不小的提升，難道內(nèi)存，速度，性能指標(biāo)不是產(chǎn)品設(shè)計(jì)當(dāng)中的重要一環(huán)和重要的考量指標(biāo)嗎？

顏色知識十分簡單，希望以后不要對顏色感覺到任何陌生。

#專欄作家#

給產(chǎn)品經(jīng)理講技術(shù)，微信公眾號（pm_teacher），人人都是產(chǎn)品經(jīng)理專欄作家。資深程序猿，專注客戶端開發(fā)若干年，對前端、后臺技術(shù)略懂，熱衷于對新的科技領(lǐng)域的探索。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。