網頁設計與 CSS
將設計檔案或螢幕截圖選色器中的顏色，轉換為您的樣式表所需的十六進位碼。
RGB 轉 HEX 轉換器 — 將 RGB 值轉換為十六進位碼，並將十六進位碼轉換為 RGB，並提供即時預覽。
輸入紅色、綠色和藍色的數值，選擇一種顏色，或貼上十六進位碼，即可同時查看所有格式：十六進位（HEX）、RGB 和 HSL。即時預覽和對比檢查功能可協助您找出最適合的文字顏色。所有功能皆在您的瀏覽器中運行。
轉換顏色
您的顏色會保留在瀏覽器中
選擇或輸入顏色
Aa
顏色代碼
HEX
–RGB（CSS）
–HSL（CSS）
––最適合的文字顏色
–對比度
指南
RGB 轉 HEX 指南：顏色代碼、HSL 及對比度
了解色彩編碼的運作原理，以及如何挑選易於辨識的色彩組合。
RGB 轉 HEX 轉換器的功能是什麼？
螢幕是透過混合紅、綠、藍三種光來呈現所有顏色的。RGB 會將這種混合以 0 到 255 之間的三個數字表示。HEX 則將這三個數字以十六進位制表示，形成如 #1F3A5F 這樣的簡短代碼，這正是 CSS、設計工具及品牌指南通常所採用的格式。
輸入三個數字、使用選色器選擇顏色，或貼上十六進位色碼。所有格式會同步更新，您還會獲得 HSL 版本，並可檢查哪種文字顏色在該背景上最易於閱讀。
為什麼人們會將 RGB 轉換為 HEX
品牌與文件
請確保標誌檔案、簡報檔與網站之間的品牌色彩保持一致。
無障礙功能
發布前，請先確認哪種文字顏色適合該背景，並檢查其對比度。
RGB 如何轉為 HEX
將這三個數字分別轉換為十六進制兩位數，然後將這三對數字串接起來。
RGB：31、58、95
31 = 1F (1 × 16 + 15)
58 = 3A (3 × 16 + 10)
95 = 5F (5 × 16 + 15)
十六進位： #1F3A5F
十六進位制使用數字 0 至 9 以及字母 A 至 F，其中 A 代表 10，F 代表 15。像 #FA0 這樣的簡寫代碼，是將每個數字的值加倍後所形成的簡寫形式，因此它代表 #FFAA00。
RGB 與 HEX 中的常見顏色
| 顏色 | RGB | HEX |
|---|---|---|
| 黑色 | 0, 0, 0 | #000000 |
| 白色 | 255, 255, 255 | #FFFFFF |
| 紅色 | 255, 0, 0 | #FF0000 |
| 綠色 | 0, 255, 0 | #00FF00 |
| 藍色 | 0, 0, 255 | #0000FF |
| 黃色 | 255, 255, 0 | #FFFF00 |
| 橘子 | 255, 165, 0 | #FFA500 |
| 灰色 | 128, 128, 128 | #808080 |
如何使用 RGB 轉 HEX 轉換器
- 請輸入紅、綠、藍三色的數值，或點擊色塊以使用選色器。
- 或者將十六進位代碼貼到「十六進位」欄位中，即可進行反向轉換。
- 讀取 HEX、RGB 和 HSL 色碼，並檢查對比度與最佳文字顏色。
- 請點擊您所需格式旁邊的「複製」按鈕。
色彩運用的簡單訣竅
- 為了確保文字易於閱讀，一般文字的對比度應至少達到 4.5 : 1，大號文字則應至少達到 3 : 1。
- 十六進位色碼不區分大小寫，因此 #1f3a5f 和 #1F3A5F 代表的是同一种顏色。
- 在 CSS 中必須加上開頭的 #，但在此處則屬可選。您可以選擇是否包含該符號來貼上程式碼。
- 螢幕與印表機呈現顏色的方式不同，因此列印出的顏色可能與您在螢幕上所見的顏色不盡相同。
限制與隱私權
隱私權
您的顏色選擇是在瀏覽器中進行轉換的。任何資料均不會傳送至我們的伺服器，也不會被儲存。您的裝置僅會記住小寫的選項。
限制事項
此工具支援標準的 8 位元 sRGB 色彩，每通道範圍為 0 至 255。它不支援透明度（RGBA 或 8 位元十六進位數）、用於印刷的 CMYK，以及廣色域色彩空間。
常見問題
RGB 轉 HEX 轉換器 常見問題解答
如何將 RGB 轉換為 HEX？
請輸入紅、綠、藍三色的數值，範圍皆為 0 至 255。此工具會將每個數值轉換為兩個十六進位數字，並將其串接起來，因此 31、58、95 會轉換為 #1F3A5F。
如何將十六進位數轉換為 RGB？
將十六進位代碼貼上至「十六進位」欄位中。三個 RGB 數值會同時填入。例如，#FF8800 對應的數值為 255、136、0。
十六進位代碼需要加上 # 符號嗎？
不。您可以輸入時加上或不加上 # 符號，像 #FA0 這樣的簡碼同樣有效。結果中總是會包含 # 符號，因此可以直接用於 CSS。
這三個 RGB 數值代表什麼意思？
它們分別代表紅、綠、藍三種顏色的光強度，範圍從 0（無）到 255（滿）。0, 0, 0 代表黑色，255, 255, 255 代表白色。
HSL 值的用途是什麼？
HSL 將顏色描述為色相、飽和度和明度。通常手動調整會比較容易，例如將顏色調得稍微淺一點，而且它能直接在 CSS 中使用。
對比度能告訴我什麼？
這顯示黑色或白色文字在您的背景色上有多顯眼。根據 WCAG 無障礙準則，對於一般文字而言，4.5 : 1 或更高的對比度通常是最低要求。
我可以加入透明度嗎？
這裡不行。此工具僅支援不透明顏色，不支援 alpha 通道。若需透明效果，請自行在 CSS 的 rgba() 中加入 alpha 值。
我的資料會被儲存或傳送至任何地方嗎？
不。轉換過程是在您的瀏覽器中進行的，任何資料都不會離開您的裝置。系統只會記住您選擇的小寫格式，以便下次使用。
來自使用此工具的使用者
評論
正在載入評論……
繼續前進
工具箱裡還有更多工具
首頁還提供了數十種無需 API 金鑰即可使用的免費工具。