起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識給你點兒“顏色”瞧瞧 | RGB通識
任何一個和用戶有交互的產品，都離不開顏色，你是否在設計稿或代碼中或者任何一個標識顏色的地方看到過，比如：#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），人人都是產品經理專欄作家。資深程序猿，專注客戶端開發若干年，對前端、后臺技術略懂，熱衷于對新的科技領域的探索。
本文原創發布于人人都是產品經理，未經許可，不得轉載。
淺顯易懂