在電腦或手機上，我們調整顏色的時候，常常會看到一些英文縮寫，那是不同的色碼，各代表什麼意思呢？這裡列出常見的色彩模型，看完之後大家就知道怎麼調整啦😂～

• 前言
• RGB
  • 色域
  • RGBA
• HEX
  • 關於進制
  • 顏色的十六進制
  • 不透明度
• CIELab
  • 各值意義
  • 優缺點
• 好用色彩工具
• 參考資料

前言

使用情境：

• 2D、3D 繪圖、製圖
• 影視業
• 印刷
• 影像處理
• UI 製作
• 程式設計
• 網頁設計
• 其他

需要精準與人溝通顏色的時候，常常需要用到，例如這種情況，我們就會希望能用更有規範的「色碼」來溝通：

那麼，開始介紹囉～

RGB

這是光的三原色，一言以蔽之：

範圍：0~255

數字越大顏色越白，若 RGB 三者顏色一樣，則是不同深淺的灰色。

舉例：

色域

圖片來源：RGB色彩空間 - 維基百科，自由的百科全書

有很多種 RGB，它們因為創立原因，色域不相同。

簡單來說，一般的電腦螢幕、軟體、相片沖洗都是以 sRGB 為預設值，日常使用 sRGB 最為常見。

如果把色域更大的圖片用 sRGB 處理，會導致掉色變醜，但 sRGB 通常是預設值，因此顯示或列印前要注意。

RGBA

有時會看到 RGBA，RGB 三個值和上述一樣，多了的 A 是什麼意思呢？

不透明度是什麼？

它是指圖片不透明程度，越透明越看得到背景、越不透明越只能看到圖片。

看起來像這樣：完全透明（0%）只看到背景，半透明（50%）看到圖片和背景混合了，完全不透明（100%）只看得到圖片。

如圖所示，越左邊不透明度越高，越右邊越低，不透明度和透明度是相反的：

圖片來源：使圖片變透明

順帶一提，css 的 rgba，a 範圍在 0~1，同 css 的 opacity，可以參考 CSS rgba() function。

HEX

關於進制

HEX 意思是十六進制，和大家說明進制是什麼，我們日常生活用的是十進制，也就是有 0~9 共十個數字符號，二進制有 0~1 共二個數字符號，滿了就會進位，因此二進制的 (1 + 1)₍₂₎ = 10₍₂₎，唸作「一零」，其他進制以此類推。

其中十六進制 0~9 不夠用，後面是 A~F，代替 10~15，總共十六個符號，優點是它可以用更少的位數表示更多的數字。

題外話，其實古代或國外，使用的不全是十進制喔，可參考 記數系統 - 維基百科，自由的百科全書。

舉例：
1F5₍₁₆₎ = (5*16⁰ + 15*16¹ + 1*16²)₍₁₀₎ = 501₍₁₀₎

顏色的十六進制

只要您懂了 RGB，懂了十六進制，可以繼續討論下去。

大家應該看過類似「#001122」的顏色表示法，由井字號和六個數字組成，井字號不理它的話，其實是把六個數字拆成三組，各代表 R、G、B，上述例子可以說是 #001122 = rgb(0, 11, 22)₍₁₆₎ = rgb(0, 17, 34)₍₁₀₎。

十六進制兩位數的極限是 FF₍₁₆₎ = 255₍₁₀₎，發現了嗎？和 RGB 最大值一樣。

不透明度

可以嘗試在 css 中顏色寫上 #00112233 之類的色碼，八位數？

是的，最後的 33 代表不透明度（Alpha），所以整個色碼代表 #rrggbbaa，應該很好記吧？

不透明度同樣，最小值 00，最大值 FF，最小值會看不見該元素，值越大元素越不透明、越看不到背景。

CIELab

它可能是一種比 RGB 不那麼常見的色彩模型，但在 Adobe Photoshop 影像處理軟體，TIFF、PDF 檔案格式中可以見到它。

它基於顏色中綠紅不能同時存在、藍黃不能同時存在的理論而建立。

各值意義

圖片來源：鄭國裕影像藝術坊: 數位攝影流程所使用的色域

優缺點

1. 色域比螢幕、印表機、人類視覺要大，能表現的顏色更多；因此每個像素所需精度較大，意味著需要更大儲存空間。
2. 因為亮度與顏色隔開，調整亮度時不會讓其他顏色走色。

好用色彩工具

• RGB配色表
• Color code converter | color conversion
• 色輪、調色盤產生器 | Adobe Color

參考資料

• Photoshop 「RGB 使用中色域」 sRGB or Adobe RGB 【飛肯設計學苑】教學範例區
• 二、八、十與十六進位 (數字系統) 轉換教學 - MIS 腳印
• RGB、Lab等顏色空間的區別 | 程式前沿
• 基礎的色彩學
• 鄭國裕影像藝術坊: 數位攝影流程所使用的色域

第一次研究色彩模型呢，如有錯誤請不吝指教，謝謝您的觀看了☺️。