RGB 轉 HEX 轉換器

為什麼需要將 RGB 轉成 HEX？

雖然 RGB (紅綠藍) 是電子螢幕顯示顏色的基礎原理，但在網頁設計 (Web Design) 與 CSS 編寫上，HEX (十六進位色碼) 才是絕對的主流。

為什麼？因為 HEX 更精簡、更易於複製貼上。

• RGB: rgb(255, 87, 51) —— 需要打很多字元，包含括號和逗號。

• HEX: #FF5733 —— 只需要 7 個字元，且不容易打錯格式。

當您使用舊版的繪圖軟體（如小畫家）或從系統取色器拿到 RGB 數值時，這款 RGB 轉 HEX 轉換器 能幫您立刻將其標準化，方便您直接貼入 HTML 或 CSS 檔案中。

核心原理：數字與字母的轉換

HEX 色碼其實就是將 0 到 255 的十進位數字，轉換為 00 到 FF 的十六進位代碼。

• 前兩碼 (RR)： 紅色數值 (0-255) 轉為 16 進位 (00-FF)。

• 中兩碼 (GG)： 綠色數值。

• 後兩碼 (BB)： 藍色數值。

什麼是 16 進位？ 在 10 進位中我們用 0-9。在 16 進位中，因為數字不夠用，所以：

• 0-9 代表 0-9。

• A 代表 10，B 代表 11 ... 直到 F 代表 15。

• 因此，FF 代表最大值 255 (15x16 + 15)。

常見的應用場景

1. 軟體與網頁的對接 (Design to Code)

設計師常用的 Photoshop 或 PowerPoint 有時會顯示 RGB 數值。

• 當開發者要將設計稿實作到網頁上時，必須先將這些 RGB 數字轉為 HEX 碼，才能保持專案代碼風格的一致性。

2. 縮減 CSS 檔案大小

雖然現代瀏覽器也支援 RGB 語法，但 HEX 碼通常字元數更少。

• 在極致優化網頁效能的情況下，使用 HEX 可以稍微減少 CSS 檔案的體積。

3. 解決相容性問題

某些舊版的 HTML 標籤（如 bgcolor 屬性）或 Email 電子報系統，可能只支援 HEX 格式而不支援 rgb() 函數。使用 HEX 是最安全的選擇。

常見問題 (People Also Ask)

Q1：輸入數值超過 255 會怎樣？

會被強制修正為 255。

• RGB 的單一通道物理極限就是 8-bit (即 0~255)。

• 如果您輸入 300，轉換器會將其視為 255 (FF)。同樣地，負數會被視為 0 (00)。

Q2：HEX 碼的大小寫有差別嗎？

沒有差別，完全通用。

• #ff5733 和 #FF5733 在瀏覽器眼中是一模一樣的顏色。

• 不過在團隊開發中，通常建議統一使用 大寫 或 小寫，以保持程式碼整潔。

Q3：這能轉換透明度 (RGBA) 嗎？

標準 HEX 不行，但新版可以。

• 傳統的 6 碼 HEX (#RRGGBB) 不包含透明度。

• 新版 CSS 支援 8 碼 HEX (#RRGGBBAA)，最後兩碼代表透明度。

• 不過為了瀏覽器相容性，如果需要透明度，建議還是使用本站的 [HEX 轉 RGB] 工具並改用 rgba() 語法。

Q4：井字號 (#) 是必須的嗎？

在 CSS 中是必須的。

• 雖然轉換器可能會只顯示代碼 (如 FF5733)，但在寫入 CSS 時，一定要加上 # 前綴，瀏覽器才能識別這是顏色代碼。