重點回顧 – Hex、RGB 的格式
上一篇文章 跟我一起成為色彩大師吧!(一) – 輕鬆看過常見色彩模式 Hex、RGB、HSB、HSL 介紹了 Hex 跟 RGB 兩個色彩模式的輸入格式分別為 “#FFFFFF”、”(255, 255, 255)”。
而這樣的格式,我們一直都用得很習慣,習慣到沒有去深入瞭解這些 0 ~ 9、A ~ F 或 255 的無符號數值是從何而來、如何組合成各式各樣的色彩?如何將一樣的顏色轉換成不同模式的值?如何單看色碼就可以大致回推是什麼顏色?
看到上述問題之後,是不是突然覺得自己好像也沒有這麼熟悉 Hex 跟 RGB 了?不用擔心,讓我們一起把這些摩斯密碼一一拆解,更深入的去認識這些編碼邏輯吧!
10 vs 16 進制
首先我們要有一個基礎概念,就是 Hex 跟 RGB 的數值分別是以 16 進位 跟 10 進位去計算的,那什麼是進位呢?進位制其實經常出現在我們的生活中,例如:每 60 秒等於 1 分鐘,每 60 分鐘等於 1 小時,這樣的換算就是 60 進位制。
所以 10 進位的值(使用的字元)包含 0、1、2、3、4、5、6、7、8、9,過了第十個值 “9” 之後,會進位緊接著第十一個值 “10”。
而 16 進位的值(使用的字元)包含 0、1、2、3、4、5、6、7、8、9、A(=10)、B(=11)、C(=12)、D(=13)、E(=14)、F(=15),過了第十六個值 “F(=15)” 之後會進位緊接著第十七個值 “10(=16)”。
如果還是覺得有點混亂的話,可以利用 線上進制轉換工具 多轉換幾次看看。
Hex 與 RGB 的數值轉換
在了解編碼格式跟進位制之後,可以開始嘗試一些比較進階的趣味小遊戲,來加深對這些格式的熟悉度,比如像是兩種模式之間的數值轉換。
ex:白色的 Hex 是 “#FFFFFF”,RGB 則是 “(255, 255, 255)”。( Hex 跟 RGB 之間的編碼轉換,其實就是前面提到的進制轉換。)
1. 對應數值
轉換前,可以先把對應的數值區隔開來會比較清楚,如下方表格。
R(紅) | G(綠) | B(藍) | |
---|---|---|---|
Hex | FF | FF | FF |
RGB | 255 | 255 | 255 |
2. 從 Hex 轉換到 RGB
如同前述的進制轉換,這裡只要分別把三組 “FF” 轉換成 10 進位的數值即可。
FF = F 個 16 + F
,也就是15 個 16 + 15
,計算式為15 x 16 + 15 = 255
。
所以 #FFFFFF 在 RGB 模式中的編碼會是 (255, 255, 255)。
3. 從 RGB 轉換到 Hex
由於 Hex 是 16 進位制的,所以這裡則是分別把三組 “255” 轉換成 16 進位的數值即可。
以計算式來看是
255 = x 個 16 + y
,而 x 跟 y 的答案只需要計算255 / 16 = 15 ... 15
,其中得出的商即為 x = 15 = F,而餘數則是 y = 15 = F。
所以 (255, 255, 255) 在 Hex 模式中的編碼會是 #FFFFFF。
從 Hex 或 RGB 編碼回推顏色
除了能夠藉由雙模式轉換增加熟悉度之外,也可以試著單看色碼回推對應的顏色,就像這個 What The Hex 的網站一樣。
如果試玩過上面的小遊戲之後,感覺到一頭霧水的話,可以先接著往下看一些回推顏色的小技巧。
1. 熟悉 R、G、B 交集圖
編碼中 R、G、B 組合而得的顏色,等同於在一個黑底上,將帶有 “Screen” 模式的紅、綠、藍三色,以布林邏輯中的 “集合” 相互堆疊,如附圖。
2. 灰階
若一顏色中 R、G、B 三色所佔的比重相近,其成色就會較混濁,是因為此概念類似於半透明白色在黑底上的變化,也就是灰階(白、灰、黑)。所以三個數值越大、顏色越亮、越接近白色;反之,值越小、顏色越暗、越接近黑色。
ex:
- #545257 = (84, 82 ,87),由此編碼可看出黑底上的紅、綠、藍比重相近,交集出的顏色較為混濁偏灰。
- #E5E3FC = (229, 227, 252),由此編碼可看出黑底上的紅、綠、藍比重相近且都很高,交集出的顏色越接近白色。
- #210B24 = (33, 11, 36),由此編碼可看出黑底上的紅、綠、藍比重相近且都很低,交集出的顏色越接近黑色。
3. 分析色彩比重
若編碼中某種顏色的數值較大,則代表該色的色彩份量越重、成色越純。
ex:#007034 = (0, 112, 52)
- Hex 紅色的值為 “00”,RGB 紅色的值為 “0”,代表此色沒有加入紅色。
- Hex 綠色的值為 “70”,進位的 “7” 在 16 進制的 16 個數字中,是位於接近中間的位置,而 RGB 綠色的值為 “112”,因此代表此色加入了將近一半的綠色。
- Hex 藍色的值為 “34”,進位的 “3” 在 16 進制的 16 個數字中,是位於接近 “0” 的位置,而 RGB 藍色的值為 “52”,因此代表此色加入了非常少量的藍色。
由此可知,#007034 / (0, 112, 52) 大致上落在綠色跟藍色的集合區間,且視覺上較接近綠色。
4. Hex 只需要關注進位值
由於 Hex 是 16 進位制,每 16 個數字會進位一次,因此在回推顏色時,只要著重關注進位了幾次就好,個位數若沒有接近 “F (=15)” 甚至未過半(7、8),則可省略不計。
ex:#7A5FF2 可自行轉變成 “#8060F0” 後再回推
- 紅色的值為 “7A”,個位數的 “A (=10)” 在 16 進制的 16 個數字中的位置已過半且接近 “F (=15)”,因此在回推顏色時,可以斟酌是否進位變成 “80”。
- 綠色的值為 “5F”,個位數的 “F (=15)” 在 16 進制的 16 個數字中,已經是最後一個數值,因此在回推顏色時,可以直接進位變成 “60”。
- 藍色的值為 “F2″,個位數的 “2” 在 16 進制的 16 個數字中的位置未過半且接近 “0”,因此在回推顏色時,可以直接省略變成 “F0″。
掌握以上四點小技巧了嗎?趁還有一點記憶的時候,趕緊再回頭試試看吧!
以上就是 Hex 與 RGB 的編碼方式超淺白解析,下一篇我們將帶大家熟悉 HSB 跟 HSL 的差異以及實戰應用!
補充資源
看 Hex 猜顏色
進制轉換器