HEX 色彩代碼是一個六位數標籤，格式為 #RRGGBB，將三個 RGB 色道（每個 0–255）打包成每對兩個十六進位數字，讓你能在標準 24 位元色彩空間中表示任何 16,777,216 種顏色，而這個空間是 CSS、HTML 以及 Figma 和 Photoshop 等工具共同使用的。在 Windows 上要把 RGB 轉成 HEX，最快的方式是使用瀏覽器型的轉換器：在 Edge、Chrome、Firefox 或任何現代瀏覽器中開啟它，輸入紅、綠、藍的值，匹配的 #RRGGBB 代碼就會出現在即時預覽旁邊——不需要安裝軟體、不需要管理員權限、不需要重新開機。由於一切都在 JavaScript 本機端執行，沒有任何資料會離開你的電腦，這對於尚未發布的配色和品牌工作來說非常實用。同一個頁面也能把 HEX 代碼讀回 RGB 和 HSL，所以這個轉換真的是雙向的：貼上 #3b82f6，你馬上就會看到 RGB (59, 130, 246)，即時色塊也會隨著你輸入而更新。如果你已經從 PowerToys、小畫家或設計師的規格表中拿到 HEX 值，把它放進 HEX 欄位，就能得到你在工作流程另一端——圖片編輯器或樣式表——所需要的精確色道數值。
如何在 Windows 瀏覽器中把 RGB 轉換成 HEX
Windows 出貨時就已經具備這個工作流程所需的一切：現代的瀏覽器（預設是 Edge，如果你有安裝的話還有 Chrome 和 Firefox），以及一些已經會說 RGB 的內建工具。小畫家的色彩編輯器會顯示色道值，PowerToys 的 Color Picker 能擷取螢幕上任何像素並複製其 HEX，而像 PowerPoint 或 Photoshop 這類設計應用程式則會在它們的色彩選擇器中以數值列出 R/G/B。瀏覽器轉換器就坐在這個工作流程的中間：不管你手上有哪個數字，它都會把下一個步驟需要的格式交給你。
- 開啟你選擇的瀏覽器（Edge、Chrome 或 Firefox），然後前往 RGB 轉 HEX 轉換器。
- 如果你用 PowerToys Color Picker (Win+Shift+C) 擷取色彩，複製的值會以 HEX 代碼的形式進入你的剪貼簿——直接貼到 HEX 欄位即可。RGB 和 HSL 的讀數會立刻更新。
- 如果你從小畫家（編輯色彩 > 自訂）、Photoshop 或設計師的規格表中複製了 RGB 數字，請把它們輸入到紅、綠、藍的輸入框中。匹配的 #RRGGBB 代碼會在同一個面板中的 HEX 欄位出現。
- 確認即時色塊符合你預期的色調——小畫家的色塊和 PowerToys 擷取的結果會因為螢幕校色不同而略有差異，所以預覽才是你的最終依據。
- 在你的下一步（CSS、影像編輯器或品牌規格表）需要哪個格式，就在 HEX、RGB 或 HSL 旁邊點擊複製，然後貼到你想要的地方。
做個快速的驗證，常見的 UI 藍色 (59, 130, 246) 會變成 #3b82f6——也就是 59 的十六進位是 3b（3 × 16 + 11 = 59），130 的十六進位是 82（8 × 16 + 2 = 130），而 246 的十六進位是 f6（15 × 16 + 6 = 246）。把它們寫在一起，結果就是 #3b82f6。這就是工具對每個顏色執行的相同轉換，只是重複套用在三個色道上。
解讀 HEX 代碼：每一對數字的意義
HEX 看起來很難懂，但一旦你看出每一對其實就是以 16 為基底寫成的一個 RGB 色道，就豁然開朗了。# 之後的前兩個字元是紅色，中間兩個是綠色，最後兩個是藍色。每對的範圍從 00（十進位 0，色道關閉）到 FF（十進位 255，色道全開），所以標準螢幕上每個可見的色調都能用這六個字元來表示。24 位元的空間——256 × 256 × 256——涵蓋了 16,777,216 種不同的顏色，這正是 CSS、HTML、Figma 和 Photoshop 等設計工具，以及大多數風格指南所依賴的同一組調色盤，這就是為什麼在這兩種格式之間轉換，對開發者和設計師來說是再常見不過的日常工作。
由於十六進位數字是從 0 到 f 而不是從 0 到 9，你確實需要一個快速的對照表：0 是 0，1 是 1，一直到 9 是 9，a 是 10，b 是 11，c 是 12，d 是 13，e 是 14，f 是 15。要解碼任何一對，就把第一個數字乘以 16，再加上第二個。所以 #3b 就是 3 × 16 + 11 = 59，也就是 #3b82f6 的紅色色道。一旦你能讀懂一對，你就能讀懂所有——轉換器只是把這個運算自動化，一次處理三個色道而已。
想更深入了解每一對的意義以及數字如何組合，RGB 轉 HEX 完整解說指南用更多的範例說明了相同的概念。
反過來：把 HEX 轉回 RGB
這個轉換器真的是雙向的。如果你有 HEX 代碼——來自 CSS 檔案、設計師或品牌指南——把它貼到 HEX 欄位，紅、綠、藍的輸入框就會更新為對應的色道值。HSL 的讀數也會出現在即時色塊旁邊，這在你想要用人話來推敲色彩時非常有用：色相是色環上 0–360° 的角度，飽和度和亮度則是 0–100% 的比例。這讓你可以輕鬆地把品牌色調得稍微亮一點或稍微柔和一點，而不必去猜原始的色道數字，然後直接把結果轉回你的樣式表能用的 HEX 代碼。
在 Windows 上，當你手上有一個樣式表的值、需要丟進小畫家或 Photoshop 時，這個方向最有用。設計師常常會問「這個品牌藍的 RGB 是什麼？」——貼上 HEX 就能得到精確的答案，而不是靠肉眼從螢幕上的色塊去猜。
常見的 RGB 與 HEX 參考值
| 顏色 | R | G | B | 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 |
這六列奠定了整個 24 位元空間的基礎：其他所有顏色都是它們之間的混合或漸進。純紅 (#ff0000) 是紅色色道全亮、綠和藍為零；常見的 UI 藍 (#3b82f6) 則是紅色約 23% (59/255)、綠色約 51% (130/255)、藍色約 96% (246/255) 所得到的結果。如果你只記得這幾個原色，就能透過推敲色道組合來驗證幾乎任何顏色。至於日常超出這些基準的轉換，同一個頁面上的轉換器按一下就能給你答案。
HEX 簡寫、大小寫規則與其他小細節
三位數簡寫的運作方式與完整形式相同——每個數字都會被重複一次。所以 #abc 會變成 #aabbcc（a→aa、b→bb、c→cc），#f00 會變成 #ff0000（純紅），#fff 會變成 #ffffff（白色）。輸入不區分大小寫，開頭的 # 是可有可無的，所以 ABC、#abc 和 abc 都會解析為同一個顏色。輸出的 HEX 一律會標準化為小寫六位數形式，每個色道都會以零補滿，所以值為 0 時會顯示為 00，而不是單獨一個 0——這個細節常讓手寫的轉換出錯，也偶爾會讓那些預期補零形式的程式碼踩到坑。
超出範圍或帶有小數的色道值會被限制在有效的 0–255 整數範圍內，而不是直接報錯；任何格式錯誤的 HEX（長度不對、含有非法字元）都會被明確標示出來，而不是默默地產生錯誤的顏色。這兩種行為在 Windows 上很重要，因為從不同應用程式貼上的值並不一致：PowerToys 有時會省略開頭的 #，影像編輯器偶爾會輸出像 59.0 這樣的小數而不是整數，而設計規格有時會因為上游管線的進位誤差而飄到 255 以上。
| 簡寫 | 展開後 |
|---|---|
| #abc | #aabbcc |
| #f00 | #ff0000 |
| #fff | #ffffff |
| #0f8 | #00ff88 |
簡寫重複規則是完整形式唯一需要做的轉換。除此之外——色道順序、進位、補零——全部都完全相同。
為什麼瀏覽器轉換器是 Windows 上的最佳選擇
在 Windows 上的替代方案通常是桌面型的色彩工具——像 PowerToys Color Picker 這種用來擷取的內建小工具，或像 Photoshop 這種重量級的編輯應用程式。兩者都很有用，但都不擅長處理介於兩者之間的格式轉換步驟。瀏覽器工具正好填補了這個空缺，而且不需要安裝：在分頁中開啟，貼上或輸入，複製，關閉分頁。因為一切都在 JavaScript 本機端執行，色彩值永遠不會被上傳到任何伺服器，所以對於品牌調色盤和尚未公開的作品來說是安全的——當你正在轉換的色彩受到禁運或屬於客戶時，這是一個很重要的考量。
在一台已經開著 Edge 的 Windows 電腦上，整個流程只要兩次點擊加一次貼上——速度快到可以在整個專案期間與你的設計工具或樣式表編輯器並肩使用。同一個頁面也能處理反方向（HEX 轉 RGB），在 RGB 數值之外一併讀取 HSL，並顯示即時色塊，讓你在把色彩寫入檔案前能先確認色調。
想深入了解，請參閱 RGB 轉 HSV 完整解說：轉換背後的公式。