電腦如何產生顏色：RGB、HEX 與二進位的故事

#FF0000. #00FF00. #0000FF. 這些符號在設計稿或程式碼裡一定看過。像密碼，也像遊戲序號。其實它們是顏色的名稱。

依序由上而下是紅、綠、藍。這是電腦稱呼顏色的方式。接下來說明這套表示法的由來。

RGB — 組成顏色的三個字母

Red、Green、Blue，光的三原色。依照混合比例，就能產生人眼所見的所有顏色。

我們每天都在看 RGB

只要有螢幕，幾乎都有 RGB。

• 螢幕 / 電視 — 每個像素由紅、綠、藍三個子像素組成
• 智慧型手機螢幕 — 相同結構，像素更小
• 電競鍵盤 LED — 每個按鍵內含 R、G、B 三顆 LED
• PC 機殼燈條 — RGB 燈帶就是 RGB 訊號

把螢幕放大到足夠倍數就能看見。紅、綠、藍，僅此而已。數百萬個微小的 RGB 點聚集在一起，組成我們看到的每一幅畫面。

顏色是混合出來的

RGB 每個通道的強度範圍是 0 到 255。

• RGB(255, 0, 0) — 只有紅色全開 → 純紅
• RGB(0, 255, 0) — 只有綠色全開 → 純綠
• RGB(255, 255, 0) — 紅 + 綠 → 黃色
• RGB(0, 0, 0) — 全部關閉 → 黑色
• RGB(255, 255, 255) — 全部全開 → 白色

紅加綠會變黃，直覺上或許難以理解，但這是光的加色混合。這與美術課學到的顏料混合（紅 + 綠 = 棕色）規則不同。光疊加越多越亮，全部加在一起就是白色。

請直接拖曳三個滑桿來確認。

右側的 8 位數字是該通道的二進位表示。拖動滑桿時這些數字也會同步變化。接下來說明 0 與 1 如何組合出 256 種數值。

為何偏偏是 0 到 255

電腦只處理 0 和 1。存放 0 或 1 的一個位置稱為位元（bit）。位元數每增加一位，能表示的數值就翻倍。

8 個位元 = 1 位元組（byte）。一種顏色有 RGB 三個通道，合計 3 位元組 = 24 位元。24 位元能表示約 1,670 萬種顏色，已足夠人眼分辨，因此 1 位元組成為單一通道的標準。

親自讀懂二進位

每個位置都有固定的值。從左到右依序是 128、64、32、16、8、4、2、1 — 即2 的次方。

將標記為 1 的位置值全部相加，即得到十進位數值。

因此 8 位元的最大值是 255。這就是 RGB 單一通道範圍為 0～255 的確切原因。

HEX — 同樣的數字，更短的寫法

RGB(255, 255, 255)，共 16 個字元。每次寫在 CSS 一行或設計工具的輸入欄裡太冗長。於是出現了用更短方式書寫同一組數字的方法。

什麼是十六進位

十六進位是用單一字元表示 0 到 15 的進位制。但日常使用的數字只有 0～9，共 10 個。不足的 6 個向字母借用。

規則有三條。

• 0～9 與平常一樣
• 從 10 開始用 A 表示
• F 是單字元最大值（= 15）

為何偏偏是十六進位

二進位 4 位元（0000 ～ 1111）恰好能表示 16 種數值。

二進位 4 位元 = 十六進位 1 個字元。四個字元縮成一個字元。RGB 單一通道是 8 位元，恰好對應十六進位 2 個字元。

把 RGB 轉換成 HEX

以 RGB(255, 87, 51) 為例來轉換。

原本 14 個字元的寫法縮短為 7 個字元。

從 HEX 推測顏色

反過來看 HEX，就能大致猜出是什麼顏色。

• #FF5733 — R 最大（FF），G 中段（57），B 偏低（33）→ 紅味強烈的橙色
• #3576E0 — R 偏低（35），G 中間（76），B 強（E0）→ 帶點紫的藍色
• #29A85A — R 偏低（29），G 強（A8），B 偏低（5A）→ 清爽的綠色

只要看前三段就能判斷「屬於橙系還是藍系」，設計師與開發者便能用同一套語言溝通。

一句話整理

• RGB — 紅・綠・藍三個通道，各 0～255
• 二進位 8 位元 — 單一通道能表示 256 種數值的本質
• HEX — 把同樣的數字用兩個字元簡短書寫的表示法

三個概念串成一條線，色碼就不再是外星文。RGB 的三組數字就是 HEX 的六個字元。

下一步是把這些數字轉化為設計師的語言。「再亮一點」「只降低飽和度」「原樣印在紙上」——這些需求光靠 RGB 和 HEX 很難處理。HSL、CMYK 和 OKLCH 如何解決這些問題，請繼續閱讀RGB 還不夠：HSL、CMYK 與 OKLCH 色彩表示法。