深耕設計多年的我們，平日里各種玩轉 Sketch，吊打 Principle，逐浪 C4D，早已熟知RGB、CMYK 和 HSB / HSV / HSL 等不同的色彩模式，但你想過我們提交給開發爸爸們的色值是怎么計算出來的嗎？在計算機領域，開發色值是一種基于 RGB 色彩模式的十六進制顏色編碼。我們知道屏幕上看到的任何顏色都是由紅、綠、藍三種最基本的色光疊加形成的，這三種顏色參數的取值范圍都是 0~255 。因此 RGB 色彩模式也是所有傳統色彩模式里色域空間最為豐富的。

它包含了 255 × 255 × 255 ＝ 16,581,375 種顏色(與此對應，HSB / HSV / HSL 色彩模式只包含了 360 × 100 × 100 ＝ 3,600,000 種顏色)，而這 1600 多萬種顏色在計算機語言里就以 # + 6 位代碼存在，因此這 6 位代碼與 RGB 色號有嚴格的對應關系。6 位代碼兩兩分為 3 組，這 3 組編碼分別對應了 RGB 三個參數。此處要注意的是，代碼數制是十六進制，而我們平時用的數字是十進制，因此想要把開發色值轉譯為RGB 色號，只需要把這 3 組兩位數編碼轉換成十進制數字就好了！怎么轉呢？下方高能。先講一個概念，位權。位權是數制中每一個固定位置數碼所對應的數值。比如在十進制下，第2位(從右往左數)的位權為 10 ，第 3 位的位權為 100 ，總之第 a 位的位權就等于 10 的 a - 1 次方。什么意思呢？拿最近比較火的 325 舉個例子，左邊 3(第3位)的位權怎么計算呢？它 ＝ 10^3-1 ＝ 100中間2(第2位)的位權 ＝ 10^2-1 ＝ 10右邊5(第1位)的位權 ＝ 10^1-1 ＝ 1(除 0 以外任何數的零次方都為 1 )因此對于 N 進制數，整數部分第 x 位的位權為 N ^ x - 1，理解了這個基礎概念，我們就能計算不同進制下的數值啦！還拿 325 來舉例。上面的公式只幫我們算出了位權，而這組數碼代表的數值還要將位權乘以對應位置的基數，基數是什么呢？就是 3、2、5。所以 325 這組數碼的數值＝ 3×10^3-1+2×10^2-1+5×10^1-1＝ 300+20+5 ＝ 325感覺好牛逼啊！325 ＝ 325，好像講了一通廢話呢！那是因為我們這是在計算十進制，而325本來就是我們熟知的十進制結果。如果現在告訴你325是一組十六進制代碼呢？它在十進制下等于多少？簡單，代入上面公式。它的十六進制數值＝ 3×16^3-1+2×16^2-1+5×16^1-1＝ 768+32+5＝805神奇吧！理解到這一步，來詳細說一下十六進制。十六進制一個周期的數碼符號有16個，表示為0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。其中A代表10，B代表11，C代表12，D代表13，E代表14，F代表15。這也就是我們平時為什么在開發色值代碼里看不到什么K啊、S啊、W這些F以后的字母。上面的325因為沒有涉及到大于9的數碼，所以沒有出現字母。我們找一個帶字母的真實案例來看看。支付寶logo換色以后的藍色開發色值為#1778FF(截屏取色，非官方)，先把它拆成對應RGB的編碼17、78、FF，代入上面公式算出它們在十進制下等值的色號。R值(10)＝1×16^2-1+7×16^1-1＝16+7＝23G值(10)＝7×16^2-1+8×16^1-1＝112+8＝120B值(10)＝15×16^2-1+15×16^1-1＝240+15＝255在色板里切換到RGB模式驗證一下，完全一致。很簡單有沒有！感覺自己通透了有沒有！以后跟開發爸爸們說話可以抬起頭了有沒有！口算基礎好的同學，看到一組開發色值就能在心理默算出對應的RGB色號，再根據色彩基礎知識，就大概能判斷出這是一個偏紅or偏綠or偏藍、偏亮or偏暗的顏色。這個冷知識對你的工作并沒有直接的指導意義，但它能使我們成為有趣的人。See？藝術和科學，從來不矛盾。最后留一點小作業，假設 B612 是一組十六進制數碼，它在十進制下等于多少呢？

| 往期相關：擬態化設計是下一個設計趨勢嗎

| 往期相關：設計師要關注的局部數據指標

| 往期相關：設計師要關注的局部數據指標

總結

以上是生活随笔為你收集整理的十六进制编码_十六进制色值的那些秘密的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。