RGB 對 HEX 對照表會將每個紅色、綠色與藍色通道（以 0 到 255 之間的十進位數表示）對應到一個六字元代碼中各自的兩位十六進位等效值，形式為 #RRGGBB。每個通道各自獨立轉換：0 變成 00，255 變成 FF，介於其中的任何值則變成補零至兩位數的 base-16 表示法。由於每一對涵蓋 00 到 FF，整個六位數格式可描述 256 × 256 × 256 = 16,777,216 種不同的顏色。這正好是 CSS、HTML 以及 Figma、Photoshop 等工具中標準 RGB 輸入所使用的同一個 24 位元色彩空間,這也是為何一張能將 RGB 三元組對應到 HEX 代碼的對照表,會成為需要在不失精度的前提下於格式之間轉換的開發者與設計師常見的需求。下方提供的參考值涵蓋最常見的幾個案例——純黑、純白、三個主要通道的極值,以及一個廣受歡迎的 UI 藍色——並附上一份逐步教學,說明如何透過瀏覽器型的轉換器,將任何 RGB 三元組轉換成對應的 HEX 代碼。
RGB 與 HEX 如何表示同一種顏色
RGB 以三個獨立通道——紅、綠、藍——來描述色彩,每個通道儲存為介於 0 到 255 之間的整數。十六進位標記法則將同樣的三個通道打包成一個簡潔的字串,將每個通道寫成兩位 base-16 數字：#RRGGBB。第一對是紅色通道,第二對是綠色,第三對是藍色。值為 00 代表「此通道為零」,FF（十進位 255）則代表「全強度」。這六位數字合計起來所編碼的資訊,與 RGB 三元組完全相同；轉換過程中並未增加或遺失任何資訊,這也正是使其能在兩個方向上都無損轉換的原因。
base-16 系統使用符號 0 到 9,接著 A 到 F 來表示值 10 到 15,因此單一位數可承載 16 種狀態,而非僅有 10 種。兩位數因此可承載 16 × 16 = 256 種狀態——正好對應 RGB 通道所需的 0 到 255 範圍。這也說明了為何兩個十六進位數字便足以編碼一個 RGB 通道,以及為何三對數字便足以在完全不進位的情況下編碼一整個顏色。
十六進位之所以也能乾淨俐落地融入程式碼,是因為每一位數恰好對應四個二進位位元,因此 #RRGGBB 是用來表示 24 位元二進位色彩值的一種友善寫法。CSS、設計軟體以及大多數色彩函式庫都能互換地接受這兩種標記法,但在樣式表中 HEX 往往勝出,因為它更簡短、易於在檔案之間複製,並且受到你在現代設計環境中會遇到的每一個色彩選擇器的支援。
RGB 對 HEX 快速對照表
在任何 RGB 對 HEX 對照表中,最常被查找的列就是端點——純黑與純白——再加上三個主要通道的極值,以及少數幾個知名的 UI 顏色。下方的數值直接取自標準的 24 位元色彩空間,與每個瀏覽器、設計工具及樣式表引擎內部所使用的數值完全相同。
| Color | RGB | HEX |
|---|---|---|
| Black | (0, 0, 0) | #000000 |
| White | (255, 255, 255) | #ffffff |
| Pure red | (255, 0, 0) | #ff0000 |
| Pure green | (0, 255, 0) | #00ff00 |
| Pure blue | (0, 0, 255) | #0000ff |
| UI blue (popular blue-500) | (59, 130, 246) | #3b82f6 |
請注意對照表的結構：每個 HEX 代碼只是將三個 RGB 通道改以 base-16 重新書寫,並保留前置零。(0, 0, 0) 會變成 #000000,因為即使值為零,每個通道仍需要兩位數。(255, 0, 0) 會變成 #ff0000,因為只有紅色通道處於最大值,其他通道塌縮為 00。(59, 130, 246) 則變成 #3b82f6——這是設計師在儀表板、按鈕與連結狀態中常用的藍色。
完整的 24 位元空間包含 16,777,216 個項目,遠超過任何印刷對照表所能呈現的數量。對於本短清單之外的顏色,實務上的做法是直接透過一個雙向 RGB 與 HEX 轉換器進行轉換,它能接受任何三元組,並回傳對應的六位數代碼以及即時預覽色塊。
三步驟將 RGB 轉換為 HEX
對於不在上表中的任何 RGB 三元組,轉換過程遵循相同的步驟：將每個通道從十進位轉為 base-16,將每個結果補零至兩位數,然後依紅—綠—藍的順序將三對串接起來。使用 RGB 對 HEX 工具可將這些運算濃縮為三個簡短的動作。
- 在 R 欄位中輸入紅色通道（0–255）,綠色通道輸入 G,藍色通道輸入 B。即時預覽色塊會填入對應的顏色,讓你在複製之前可以先確認色調。
- 在預覽旁邊讀取標準化的 HEX 代碼。輸出永遠是小寫、六位數且補零,因此任何通道的值為 0 時會顯示為 00,而非單獨的一位數字。
- 點擊任一格式（HEX、RGB 或 HSL）旁的複製按鈕來取得你需要的值。你也可以將一個 HEX 代碼（無論是否帶有前置的 #）貼到 HEX 欄位中,將顏色轉回 RGB 通道。
如果你想看一次完整的計算過程,就以那個廣受歡迎的 UI 藍色 RGB (59, 130, 246) 為例。分別轉換每個通道：
- 59 ÷ 16 = 3 餘 11 → 3B
- 130 ÷ 16 = 8 餘 2 → 82
- 246 ÷ 16 = 15 餘 6 → F6
依序——紅,然後綠,然後藍——將三對串接起來,即可得到 #3b82f6,這與上方對照表中顯示的值相同。一旦熟悉其模式,即使手動轉換也能快速完成,但對於任何稍具規模的三元組,使用轉換器即可避免數字打錯的風險。
簡寫、大小寫與補零
HEX 標記法有幾項值得了解的慣例,因為它們會影響對照表（以及轉換器）解讀輸入的方式。最常見的簡寫是三位數形式：當每對的兩個數字相同時,該對可以被合併。#abc 會變成 #aabbcc,#f00 會變成 #ff0000（純紅）,#fff 則會變成 #ffffff（白色）。此簡寫屬於 CSS 規範的一部分,任何現代轉換器都接受它與其完整六位數形式等價。
輸入本身不區分大小寫。ABC、#abc 與 abc 都會解析為相同的顏色,因此對照表可以自由地使用大寫或小寫,而結果不會改變。為避免下遊出現意外,輸出永遠會標準化為小寫且補零的六位數：通道值為 0 時會呈現為 00,而非單獨的 0。這個細節常會在手寫轉換時出錯——例如紅色通道的值為 7 時,常被寫成 #7 而非 #07,進而在實際上線後悄悄變成錯誤的顏色。
超出範圍或帶有小數的值也能被合理地處理。如果你在某個通道中輸入 260,它會被限制在 255,而非丟出錯誤或繞回循環。小數值會被限制在有效的 0–255 整數範圍內。而格式錯誤的 HEX 輸入——長度不對或含有非法字元——則會被明確地標記出來,而不是默默產生錯誤的顏色。這些行為之所以重要,是因為在實際上線的程式碼中,最常見的錯誤色彩來源不是對數學理解有誤,而是一時的打字錯誤。
當你需要同時使用 HSL 與 HEX
HEX 是樣式表偏好的格式,而 RGB 對 HEX 對照表能回答大多數日常的轉換問題。然而 HEX 與 RGB 共有一項限制：調整顏色意味著得逐一猜測三個獨立的通道數值。色相、飽和度與明度（HSL）以人類更易於直覺思考的方式來描述同一種顏色——色相以色環上 0 到 360 度的角度表示,飽和度與明度則以 0 到 100 的百分比表示——這使得在不對原始通道數值反覆試誤的情況下,稍微調亮或淡化一個品牌色變得容易許多。
一個優秀的轉換器會同時顯示這三種格式,讓你能依任務需求在它們之間切換。從設計師的 RGB 規格出發,複製出可在 CSS 中使用的 HEX。從現有樣式表中的 HEX 代碼出發,讀取出可供影像編輯器使用的 RGB 通道。或讀取 HSL 以理解為何兩個幾乎相同的顏色看起來有微妙差異,然後將調整後的值直接轉回可供樣式表使用的 HEX 代碼。
比較 RGB、HEX 與 HSL
這三種標記法皆描述同一個 24 位元空間中的顏色；它們的差別在於資訊的結構方式,以及各自最適用的使用情境。
| Format | Structure | Best for |
|---|---|---|
| RGB | Three integers, each 0–255 | Programmatic input, scripting, exporting between tools |
| HEX | Six base-16 digits, prefixed with # | CSS, HTML, copying between stylesheets and design files |
| HSL | Hue 0–360°, saturation 0–100%, lightness 0–100% | Reasoning about color adjustments and design variations |
這些格式所能表示的顏色數量並無不同——它們皆描述同一個擁有 16,777,216 個項目的 24 位元空間。在它們之間做選擇,取決於該值將用於何處,以及將如何被編輯。HEX 在精簡儲存與複製貼上方面勝出,RGB 在程式化輸入與資產流程方面勝出,而 HSL 則在你需要以設計師而非數字的方式來思考顏色時勝出。
RGB 對 HEX 參考的常見用途
當你需要針對一小組知名顏色進行快速查找時,一份靜態的 RGB 對 HEX 對照表很實用,但大多數實際工作需要的是即時轉換。典型的場景包括將設計師的 RGB 規格轉換成 CSS 可直接使用的 HEX 代碼、從現有樣式表中讀取 HEX 值以確認其底層通道、將品牌顏色取樣整理成有文件的色票,以及在決定採用某個變體前先驗證所選顏色的 HSL。
由於轉換作業完全在你的瀏覽器中透過 JavaScript 執行,因此不會有任何顏色數值被上傳到伺服器,這讓該工作流程對品牌色票與尚未公開的作品而言是安全的。如果你想更詳細地確認隱私行為,可參閱隱私與準確性指南,其中會逐一說明當你關閉分頁時,有哪些內容保留在本地端,有哪些內容會被捨棄。
針對單次的查找需求,上方的對照表已涵蓋了基本項目；至於其他所有情況,RGB 對 HEX 轉換器可接受任何有效的 RGB 或 HEX 輸入、驗證邊界情況,並在 HEX、RGB 與 HSL 旁邊顯示即時色塊,讓你能複製出下一步所需精確的值。
若想更深入了解,可參閱適用於網頁設計的 CMYK 對 RGB：螢幕預覽工作流程。