將 RGB 轉為十六進位
立即將 RGB 轉為 HEX,並反向轉為 RGB,搭配即時色彩預覽與 HSL,全部都在瀏覽器中完成。
隱私權:你的檔案不會離開裝置,所有處理均在瀏覽器本機完成。
使用方式
- 1.輸入紅、綠、藍通道值(各為 0 至 255)以產生對應的 HEX 碼。
- 2.或貼上一個 HEX 色彩,例如 #3b82f6 或簡寫形式 #abc,至 HEX 欄位以轉換回 RGB。
- 3.檢視預覽區的 HEX、RGB 與 HSL 值,並點選複製以取得任一格式。
關於將 RGB 轉為十六進位
RGB 轉 HEX 是一種快速且私密的色彩轉換工具,支援雙向運作。輸入紅、綠、藍三通道值(各為 0–255),即可取得對應的 HEX 碼,或貼上 HEX 色彩碼,將其解碼回 RGB,並附帶 HSL 顯示與即時樣色,讓你立即看到色彩效果。
十六進位色彩表示法將每個 RGB 個通道轉換為兩位十六進位數字,形式為 #RRGGBB。因為每個數對的範圍從 00 到 FF(0–255 的十進位表示),六位數格式可以描述 256 × 256 × 256 = 16,777,216 種不同的色彩。這與 24 位元色彩空間 CSS、HTML,以及如 Figma 和 Photoshop 等設計工具、大多數風格指南所使用的空間相同,這就是為何開發者和設計師之間轉換這兩種格式成為如此常見的日常任務。
該轉換器也支援三碼簡寫形式:#abc 會擴充套件為 #aabbcc,因此 #f00 會轉為 #ff0000(純紅色),#fff 會轉為 #ffffff(白色)。輸入不區分大小寫,且前導 # 可省略,因此 ABC、#abc 與 abc 皆會轉為相同色彩。輸出的 HEX 碼一律轉為小寫六位數,並對各通道補零,例如值為 0 會顯示為 00 而非僅為 0 — 這點正是手動轉換時常見的疏漏。
超出範圍或小數形式的通道值會被限制在有效的 0–255 整數範圍內,而不是丟擲錯誤。任何格式錯誤的十六進位數(長度錯誤、非法字元)也會明確標記,而不是產生靜默錯誤的錯誤色彩。所有操作都在 JavaScript 本機進行,從來不會將色彩值上傳至伺服器,因此適合品牌色彩調色盤和未釋出的作品。
除了 HEX 與 RGB,此工具還提供 HSL(色調、飽和度、明度)資訊。HSL 以人類更直覺的方式描述色彩:色調為色輪上從 0 至 360 度之間的角,飽和度與明度則為 0 至 100% 的範圍。這讓你能夠輕鬆調整品牌色彩的明度或柔和度,無需猜測原始通道數值,然後直接轉換為可直接用於樣式表的 HEX 碼。
快速參考:RGB(0,0,0)為 HEX #000000(黑色),(255,255,255)為 #ffffff(白色),(255,0,0)為 #ff0000(純紅色),(0,255,0)為 #00ff00(綠色),(0,0,255)為 #0000ff(藍色),以及常見的 UI 藍色(59,130,246)為 #3b82f6。隨著你輸入時,預覽樣色即時更新,幫助你確認正確的色彩濃度,再複製至你的程式碼或設計檔案中。
常見用途:將設計師的 RGB 指南轉換為 CSS 就緒的 HEX 編碼,從樣式表讀取 HEX 編碼並轉換為 RGB 頻道用於圖片編輯器,取樣與紀錄品牌色彩,或快速檢查色彩的 HSL 值以理解色調、飽和度與亮度。
常見問題
- 什麼是 HEX 色彩碼?
- HEX 碼以 #RRGGBB 的形式表示色彩,其中每對兩位數為一個 RGB 通道的十六進位值(範圍為 00 至 FF,即 0 至 255)。六位數可涵蓋 16,777,216 種色彩——這正是 24 位元標準色彩空間,廣泛應用於 CSS、HTML 及各類設計工具中。
- 三碼簡寫形式是否支援?
- 支援。三碼 HEX 會將每個數字擴充套件為兩倍,例如 #abc 會轉為 #aabbcc,#f00 會轉為 #ff0000。輸入不區分大小寫,且前導 # 可省略。
- 我的色彩值會被上傳嗎?
- 不。轉換過程完全在你的瀏覽器中使用 JavaScript 執行。不會將任何資料傳送至伺服器,因此你的色彩調色盤與未釋出的色彩會留在你的裝置上。
相關工具
色彩工具 使用指南
查看全部- RGB to HEX for Beginners: A Plain-English Walkthrough (英文原文)
- RGB to HEX Explained: What Each Pair of Digits Means (英文原文)
- RGB to HEX Examples: Common Conversions and the Pattern (英文原文)
- RGB to HEX Chart: Reference Values and How to Convert (英文原文)
- RGB to HEX Alternative: A Browser Converter Worth Trying (英文原文)
- RGB to HEX for Accessible Color Contrast (英文原文)
- Is RGB to HEX Safe to Use Online? Privacy and Accuracy Guide (英文原文)
- Convert RGB Values to HEX Color Codes Instantly (英文原文)
- Convert RGB to HEX Color Codes in Your Browser (英文原文)
- Convert RGB to HEX and Back in Your Browser Instantly (英文原文)
- How to RGB to HEX: Convert Color Codes in Your Browser (英文原文)
- Convert RGB to HEX Online: Free Instant Color Tool (英文原文)
- How to Convert RGB to HEX: A Quick Practical Guide (英文原文)
- Color Palette Generator on Android: A Browser Guide (英文原文)
- Choosing the Right Approach to Mix Two HEX Colors (英文原文)
- Gradient Generator Explained: How the CSS Gets Built (英文原文)
- Color Contrast Checker Free, No Sign Up (英文原文)
- Web Safe Colors Explained: The 216-Cube Formula (英文原文)
- How to Choose the Right Approach to Generate an SVG Pattern (英文原文)
- How to Compare Approaches to Generate an SVG Blob (英文原文)