若要在 Python 中將像 (59, 130, 246) 這樣的 RGB tuple 轉成可直接用於 CSS 的 HEX 十六進位字串，需將各個通道分別轉成兩位十六進位數字，再串接成 #RRGGBB 的形式 —— 這是一個取自 24 位元色彩空間的六位數代碼，涵蓋 256 × 256 × 256 = 16,777,216 種不同的色彩。計算本身只需一行 Python —— 一個 f-string、一個 str.format 呼叫，或一個位元位移封裝 —— 但真正讓一個巧妙片段變成可靠轉換程式碼的，是其周邊的處理工作：處理像 #abc 這類的三位數簡寫、將輸出統一為小寫、限制超出 0–255 範圍的通道值，以及驗證格式錯誤的輸入，讓打錯字時不會悄悄產生錯誤的色票。大多數開發者會撰寫一個小工具函式，然後在需要的地方到處匯入；其餘的人則完全跳過程式碼，改用瀏覽器版轉換工具，不僅會回傳相同的 HEX 值，還提供即時色彩預覽、HSL 讀數和一鍵複製功能。兩種做法都會產生相同的輸出。差別只在於誰在負責計算。
RGB 如何對應到 HEX（以及為何它在 Python 中能正常運作）
HEX 色彩代碼是一種簡潔的 RGB 色彩表示方式。三個通道 —— 紅、綠、藍 —— 各自編碼為一對兩字元的十六進位數，因此 #RRGGBB 表示法可直接對應到 (R, G, B)。由於單一十六進位數字涵蓋 0–15，兩個十六進位數字則涵蓋 00–FF，因此每一對代表一個 0 到 255 之間的整數，這正好是 CSS 或 HTML RGB 通道所使用的範圍。這種直接對應正是為何每個現代網頁色彩工作流程都能在兩種表示法之間自由切換而不會喪失精準度 —— HEX 值只是以 16 進位表示的 RGB tuple。
簡寫形式 #abc 是相同概念的迷你版本：每個十六進位數字都會重複，因此 #abc 會展開成 #aabbcc，#f00 會展開成 #ff0000（純紅），#fff 會展開成 #ffffff（白色）。一旦 HEX 字串被標準化為六位數形式，便可透過每次取兩個字元來切割，並用 Python 的 int() 以 16 為基底解析每一段，從而取出各個通道值。無論使用者貼上的是哪種形式，函式最終都會回傳與原本 Python 中相同的三通道 tuple。
| 方法 | 典型的程式碼樣貌 | 優點 | 注意事項 |
|---|---|---|---|
| f-string | f"#{r:02x}{g:02x}{b:02x}" | 可讀性佳，適用於 Python 3.6+ | 輸出為小寫，除非改用 :02X |
| str.format | "#{:02x}{:02x}{:02x}".format(r, g, b) | 適用於較舊版本的 Python | 容易搞錯參數順序 |
| 位移封裝 | "#{:06x}".format((r << 16) + (g << 8) + b) | 輸入為整數時相當精簡 | 若沒有 :06x 會遺失前置零 |
| int.to_bytes | r.to_bytes(3, "big").hex() | 簡潔，無需位元運算 | 僅適用於 Python 3 |
在 Python 中將 RGB 轉成 HEX：逐步說明
- 將三個通道值（各介於 0–255 之間）以整數形式讀入 —— 通常是像 rgb = (59, 130, 246) 這樣從 tuple 解包出來。
- 使用 {value:02x} 格式說明將每個通道格式化為零填補的兩位十六進位字串，產生小寫輸出（若要大寫則使用 {value:02X}）。
- 將三個格式化後的字串依紅、綠、藍的順序串接，前面加上 "#"，產生 #RRGGBB。
- 將結果以字串形式回傳 —— 那就是可以直接用在 CSS 的 HEX 代碼。
大多數 Python 開發者最常採用的一行寫法是 f-string 版本，能讓整個轉換過程一目了然。我們用一個例子逐步走一遍：取 rgb = (59, 130, 246)。用 "{59:02x}" 格式化紅色通道，會得到 "3b"。用 "{130:02x}" 格式化綠色通道，會得到 "82"。用 "{246:02x}" 格式化藍色通道，會得到 "f6"。把這三個字串與前綴井字號串接起來，結果就是 #3b82f6 —— 廣受歡迎的 Tailwind UI 藍色。每個步驟都只用到了整數轉十六進位，因此不管原本的 tuple 是怎麼產生的，函式執行的方式都一樣。
若不使用 f-string，也可以直接用 str.format 寫出等效版本，它適用於所有 Python 3 版本，也能在 Python 2.7 上執行。位移版本則是在格式化之前先把各通道封裝成單一個 24 位元整數 —— 當輸入已經是介於 0–16777215 範圍內的單一數字（例如從工作流程其他部分傳來的整數型色彩）時特別有用。這兩種做法都會產生與 f-string 版本相同的 "#3b82f6" 輸出；選擇的關鍵多半在於可讀性與 Python 版本的相容性。對大多數專案來說，f-string 是三種寫法中最清楚的，因為 :02x 格式說明能讓「兩位數字填補」這項要求一眼就看出來。
在 Python 中將 HEX 轉回 RGB
從 HEX 字串反推回通道值是反向的操作。如果開頭有 "#"，先把它去掉；接著把剩下的六個字元切成兩兩一對，再用 int(pair, 16) 以 16 為基底解析每一對。我們以上一步的結果來實際操作：將字串 "3b82f6" 切成兩兩一對（"3b"、"82"、"f6"），再各自以 16 進位解析為整數，就會得到 (59, 130, 246)，證明了整個往返過程完全無損。
一個能同時處理完整六位數形式與三位數簡寫的乾淨 Python 工具函式大致像這樣 —— 先將每個數字加倍以展開簡寫形式，再執行同樣的切割動作。簡寫 "abc" 會變成 "aabbcc"，同一個工具函式會產生 (170, 187, 204)，使用者完全不需要知道自己原本貼上的是哪種形式。對於以 tuple 形式傳遞 RGB 值的專案來說，該工具函式可以化為一行生成式：對 i in (1, 3, 5) 各執行一次 int(hex_color[i:i+2], 16)，再組合成 tuple。搭配最前面的展開步驟，便能涵蓋開發者可能遇到的各種合法 HEX 字串。
手寫轉換程式時常見的陷阱
手寫的 Python 轉換程式產生錯誤顏色的原因，幾乎從來不是數學問題。十六進位轉換本身只有兩行程式碼。真正的 bug 潛藏在它的輸入處理之中，而同樣的四個錯誤總是在各大論壇與 Stack Overflow 的解答中反覆出現：
- 輸出缺少 "#"。 CSS 規定要有前綴井字號。有些片段忘了加上，結果在 REPL 裡看起來沒問題，但在樣式表中卻被當成純字串顯示。串接前永遠記得補上 "#"。
- 單一位數的通道會漏掉前置零。 沒有使用 :02x 的情況下，值 (5, 0, 0) 會被格式化為 "#500" 而不是 "#050000" —— 這是完全不同的顏色。:02x 格式說明正是用來確保每個通道都剛好佔兩位數。
- 三位數簡寫從來沒有被展開。 如果工具函式只接受六位數的輸入，那麼使用者貼上 "#abc" 時，要嘛直接報錯，要嘛 —— 更糟的是 —— 隔一個字元讀取，靜悄悄地產生錯誤顏色。切割之前永遠記得把 "#abc" 展開為 "#aabbcc"。
- 超出範圍的通道值沒有被限制。 如果設計師丟給你 (300, -10, 128)，轉換過程要嘛拋出錯誤，要嘛以 256 為模數做迴圈處理，無論哪種都不是使用者想要的結果。在格式化之前，請用 min(max(channel, 0), 255) 將數值限制在 0–255 範圍內。
上述這些問題每一項都能用兩三行程式碼修正，但前提是你得先知道它們存在 —— 這也是為什麼同樣的問題年復一年地再次出現在 Python 論壇上。一份簡單的常見參考色票也能拿來當作快速的測試組，因此值得保留一份小型表格，列出每個網頁工作流程都應該能正確處理的顏色：
| 顏色名稱 | RGB | HEX |
|---|---|---|
| 黑色 | (0, 0, 0) | #000000 |
| 白色 | (255, 255, 255) | #ffffff |
| 純紅 | (255, 0, 0) | #ff0000 |
| 綠色 | (0, 255, 0) | #00ff00 |
| 藍色 | (0, 0, 255) | #0000ff |
| UI 藍 | (59, 130, 246) | #3b82f6 |
如果你的工具函式能對 (0, 0, 0) 回傳 #000000、對 (255, 0, 0) 回傳 #ff0000，並對 (59, 130, 246) 回傳 #3b82f6，那麼基本轉換就是正確的；其餘的邊界情況（簡寫、限制大小寫統一、格式驗證）則是多數專案需要另外補上的部分。
跳過程式碼：使用瀏覽器版轉換工具
若你只是需要為樣式表取得一個 HEX 值，那麼從頭打造並測試一個工具函式就顯得殺雞用牛刀了。RGB to HEX 轉換工具以 JavaScript 直接在瀏覽器中執行相同的邏輯，因此不需要安裝、不需要任何相依套件，也不需要維護任何程式碼。輸入三個通道值，即可在即時色彩預覽旁讀取 HEX、RGB 與 HSL 數值；也可以貼上一段 HEX 代碼，反向取得各通道值。所有運算都在瀏覽器本地端完成，因此品牌色票與尚未公開的色彩絕不會離開你的裝置。
該工具也能自動處理上述四項常見陷阱 —— 自動限制超出範圍的值、自動展開簡寫形式、將輸出統一為六位數小寫，並對格式錯誤的輸入發出警示，而不是悄悄產生錯誤色彩。若想更深入了解每一對數字如何對應到一個通道，可以參閱 RGB to HEX 表示法指南，該文以淺顯易懂的方式搭配 24 位元色彩空間中的實際範例，解說了相同的數學原理。
如何使用 RGB to HEX 工具進行轉換
- 在 RGB 欄位中輸入紅、綠、藍三個值（各介於 0 到 255 之間）。HEX、RGB 與 HSL 讀數會隨著你的輸入即時更新，並以即時色塊顯示該顏色。
- 若要反向操作，請將像 "#3b82f6" 這樣的 HEX 顏色貼到 HEX 欄位，或者使用像 "#abc" 這類的三位數簡寫形式。該工具接受大寫或小寫輸入，前綴 "#" 則可有可無。
- 在即時預覽旁讀取 HEX、RGB 與 HSL 數值，並點選任一數值旁的「複製」按鈕，即可將該格式的字串複製到你的樣式表、影像編輯器或設計檔案中。
當眼前的任務是「我手上有設計師給的一組 RGB tuple，需要轉成 CSS 用的格式」時，用 Python 進行轉換能讓一切保持在程式碼中並方便測試。當任務比較接近「這個顏色的 HEX 是什麼？它看起來如何？」時，開啟瀏覽器工具看著預覽更新，會比繞一圈從直譯器到終端機再到主控台輸出再回到原點來得快。
想進一步了解，請參閱 在 Windows 上將 RGB 轉成 HSV：在瀏覽器中轉換色彩。