一個標準的 RGB 轉 HEX 範例會將三個 0 到 255 的整數通道,對應到一個六位數的十六進位字串,格式為 #RRGGBB。由於每一個兩位數的十六進位組合所涵蓋的 256 個值,正好等於一個 RGB 通道的範圍,因此在 256 × 256 × 256 = 16,777,216 種不同顏色之間,這種對應關係是直接且精確的。這就是 CSS、HTML、Figma、Photoshop 以及幾乎所有網頁設計風格指南所使用的完整 24 位元色彩空間,這也說明了為什麼 RGB 轉 HEX 範例會如此頻繁地出現在教學文章、品牌設計指南和論壇回答中。一旦你知道紅色通道對應第一組、綠色對應第二組、藍色對應第三組,就能一眼讀懂任何轉換結果。如果某個顏色值落在這些範例之間,同一條規則仍然適用:分別轉換三個通道,再串接六個十六進位數字,這樣 24 位元色彩空間中的任何顏色都能寫成一個簡短的字串。下列範例涵蓋你最常遇到的情況、串連這些範例的轉換模式,以及處理其他色調的方法。
你會用到的常見 RGB 轉 HEX 範例
日常的色彩工作反覆使用同一組 RGB 轉 HEX 範例。純黑與純白決定了色階的兩端,三個加色原色(紅、綠、藍)是螢幕上所有其他顏色的基本組成,而幾個廣為人知的 UI 色調補足了實務上的應用。下表顯示精確的 RGB 與 HEX 配對,讓你無需手動重新計算,就能直接複製到 CSS 或設計檔案中。
| 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 (Tailwind-style) | (59, 130, 246) | #3b82f6 |
每一列都是教科書等級的 RGB 轉 HEX 範例:輸入三個整數通道,輸出一個統一的小寫字串,每個通道都會補零為恰好兩位十六進位數字。任何一個差一錯誤或遺漏的零,都會產生略微不同的顏色,這就是為什麼將輸出統一為六位數、補零的形式,是每個可靠的轉換工具都會做的事情。當你開始以這些基準色建立調色盤時,列與列之間的間距也透露了有用的訊息:每次將某個通道加倍,就能在色相環上整齊地移動,這也是互補色與三等分配色背後的直覺。
每個範例背後的轉換模式
每個 RGB 轉 HEX 範例都遵循同一條單行規則:將每個十進位通道(0–255)轉換為兩位十六進位組合,然後在井字號之後串接這三組組合。將十進位數字轉為兩位十六進位,意味著以 16 為基底表示,若結果少於兩個字元,則在前面補零。這個補零步驟也說明了為什麼超出範圍或帶有小數的通道值,在格式化之前會被限制到 0–255 的整數範圍——否則就會產生錯誤的位數,或是發生不易察覺的進位誤差。
以熱門的 UI 藍色 RGB (59, 130, 246) 作為完整示範。
公式:HEX = "#" + toHex(R) + toHex(G) + toHex(B),其中每個 toHex 結果都會補零為兩個字元。 步驟 1 — 紅色:59 的 16 進位 = 3 × 16 + 11 = "3b",補零後 → "3b"。 步驟 2 — 綠色:130 的 16 進位 = 8 × 16 + 2 = "82",補零後 → "82"。 步驟 3 — 藍色:246 的 16 進位 = 15 × 16 + 6 = "f6",補零後 → "f6"。 結果:"#" + "3b" + "82" + "f6" = #3b82f6。
請注意,即使通道值很小,補零規則仍然重要。紅色值 10 會變成 "0a",而不是裸露的 "a",因此 #0a14f6 才是正確的字串,而 #a14f6 則會是長度錯誤、格式不對的三通道字串。輸出永遠會統一為小寫六位數的形式,以確保在 diff 工具、設計系統 token 和版本控制中保持一致。這也說明了為什麼當紅色通道為零時,最終字串中不會出現前置零——這條規則是分別套用於每個兩位數的組合,而不是整個色碼。
在瀏覽器中轉換任何 RGB 值
如果你想看到靜態圖表以外的更多 RGB 轉 HEX 範例,最快速的方式就是使用能在你輸入時即時重新計算的轉換工具。RGB 轉 HEX 工具會在你自己的裝置上以 JavaScript 執行轉換,因此色塊和三種格式會一起更新,完全不需要往返伺服器。具體步驟如下:
- 在你的瀏覽器中開啟 RGB 轉 HEX 轉換器。
- 在三個輸入欄位中輸入紅、綠、藍的值(每個值介於 0–255)。
- 在即時色彩預覽旁讀取對應的 HEX 色碼、RGB 三元組和 HSL 數值。
- 在你想要直接放入 CSS、Figma 或品牌規格表的格式旁點選「複製」。
因為預覽色塊會在每次按鍵時更新,你可以先在視覺上確認色調,再將其套用到樣式表中。如果結果顏色不如預期,通常代表其中一個通道有誤,而並列顯示的數值會讓出錯的值一目了然。同一套流程也適用於較少見的情況:輸入帶小數的通道,轉換器會自動將其限制為有效的整數;貼上格式錯誤的 HEX 字串時,工具會標示出來,而不是回傳錯誤的顏色。
讀懂三位數的 HEX 簡寫
手寫的 CSS 片段和較舊的設計檔案,經常使用像 #abc 或 #f00 這樣精簡的三位數形式。三位數的 HEX 是簡寫形式,會將每位數字加倍展開,因此 #abc 會展開為 #aabbcc,#f00 會展開為 #ff0000(純紅),#fff 會展開為 #ffffff(白色)。輸入不區分大小寫,井字號可有可無,這表示 ABC、#abc 和 abc 都會解析為同一個顏色,轉換器也都能接受這些拼法。
同一條簡寫規則也可以反向套用。如果你收到的品牌色是 #0f8,需要為設計系統取得完整形式,請先將其展開為 #00ff88,再將其視為一般的六位數 HEX 來處理。RGB 轉 HEX 轉換器以相同方式處理三位數和六位數的輸入,因此你不必在貼上之前手動統一字串格式。當你從使用不一致標點的文件頁面複製程式碼時,這特別實用,因為轉換器仍然能正確解碼,並清楚顯示它對應的完整形式顏色。
反向操作:HEX 轉 RGB
RGB 轉 HEX 範例只是日常轉換工作的一半。設計師和開發人員經常需要反向操作,例如當樣式表中的 HEX 色碼必須在只支援 RGB 通道的影像編輯器中開啟時,或是當以 HEX 記錄的品牌色必須取樣到分別記錄 R、G、B 的規格表中時。這個過程與上述過程相反:將井字號之後的六個字元拆成三組,再將每組從 16 進位轉回介於 0 到 255 的十進位整數。
舉例來說,#3b82f6 反轉回 RGB 會得到 (59, 130, 246),這與先前完整示範中使用的 UI 藍色相同。RGB 轉 HEX 工具同樣能處理這個方向:將任何 #hex——無論是六位數還是三位數簡寫——貼到 HEX 欄位,即可在另一側讀取對應的 R、G、B 三元組,以及相同的 HSL 值和即時預覽。這種單一來回檢視的方式,讓雙向轉換器比手動計算兩次要快得多,也是你從樣式表取樣品牌色,或記錄自訂調色盤時會用到的同一套流程。
為什麼 HSL 會與 HEX 和 RGB 一起顯示
許多轉換器只顯示 HEX 和 RGB,但大多數設計工作也能受益於 HSL,因為 HSL 以人類能直接理解的方式描述同一個顏色:色相是色相環上 0 到 360 度的角度,飽和度和亮度則是 0 到 100 百分比的數值。這使得 HSL 成為將品牌色調亮幾個百分比或變得更柔和時最自然的格式,不必再去猜測原始的通道值,這正是設計師在審稿過程中經常要求的調整。
一旦你得到滿意的 HSL 值,就可以在同一個工具中直接將其轉回樣式表可用的 HEX 色碼。這種三格式並列顯示在你撰寫調色盤文件時特別實用:HEX 用於 CSS 變數,RGB 用於 Figma 或 Photoshop 規格,HSL 則用於設計理念說明,解釋每個顏色被選中的原因。即時更新的色塊也能幫助你在複製到程式碼或設計檔之前,確認色調是否完全正確,這避免了手動輸入的 HEX 看似正確,但實際呈現卻略有偏差的常見來回修正。
延伸閱讀:如何在瀏覽器中將 RGB 值轉換為 HSV。
延伸閱讀:產生 SVG 圖樣時避免犯錯。