RGB 與 HEX 是同一個 24 位元色彩空間的兩種表示法,其中三個通道——紅、綠、藍——每個範圍從 0 到 255,共同產生 16,777,216 種不同的顏色之一。RGB 把這些通道寫成三個十進位數字,而 HEX 則寫成 #RRGGBB,每一對十六進位數字代表一個範圍從 00 到 FF 的通道。因為兩種格式描述的正是同一組底層色彩數值,在它們之間切換純粹是重新格式化數字的問題,並不會改變顏色本身。對初學者來說,那個重新格式化的動作就是唯一真正需要學會的技巧:一旦你理解 #ff0000 只是用 HEX 方式書寫 RGB (255, 0, 0),所有其他顏色都遵循同一個規則。像 RGB 轉 HEX 這種雙向轉換工具可以雙向處理格式互換,並提供即時色塊讓你在貼進 CSS、HTML、Figma 或 Photoshop 之前先確認顏色。
RGB 與 HEX 程式碼實際上描述了什麼
螢幕上的每個像素都是一道光譜食譜:一點紅、一點綠、一點藍。色彩代碼就是把這道食譜精確寫下來的方式。在 RGB 中,這個食譜是由三個以逗號分隔的整數組成——例如 RGB (255, 0, 0) 代表全紅、無綠、無藍。每個通道可接受 0 到 255 之間的任意整數,因為 8 個位元的資料就能容納這麼多不同的數值(2⁸ = 256)。
HEX 是用 16 進位而非 10 進位寫成的同一道食譜。你得到的不是三個數字,而是一個井字號加上六個字號:#RRGGBB。前兩個字元是紅色通道,中間兩個是綠色,最後兩個是藍色。每對的範圍從 00(零)到 FF(十進位的 255)。
| 格式 | 它表達什麼 | 數值範圍 | 常見出現場合 |
|---|---|---|---|
| RGB | 三個十進位通道 | 每個 0–255 | 設計工具、模型圖、影像編輯器 |
| HEX | # 後接六個十六進位數字 | 每對 00–FF | CSS、HTML、設計標記 |
| HSL | 色相角度 + 飽和度 + 亮度 | 0–360° / 0–100% / 0–100% | 調色盤微調、無障礙設計推理 |
這三種表示法可以互換,是因為底層的 24 位元色彩空間——每個通道 8 位元 × 3 個通道——總共只有 256 × 256 × 256 = 16,777,216 種可能的食譜。CSS、HTML 以及像 Figma 和 Photoshop 這類設計工具都使用同一個色彩空間,這就是在 RGB 與 HEX 之間轉換會成為日常工作的原因。
為什麼兩種格式都會出現在日常設計工作中
設計師與開發人員會根據當下情境選擇不同的表示法。在模型圖中取色、建立漸層、或在會議中描述品牌色票時,RGB 感覺起來很直覺,因為每個通道對應到一個你能在腦中想像上下調整的旋鈕。在撰寫樣式表時,同一個顏色更常被打成包含開頭 # 的七字元 HEX 字串,因為這正是 CSS、HTML 與設計標記所期望的格式。
這就是來回切換不斷發生的根源。設計師在訊息中傳給你「RGB 59, 130, 246」。你需要把一個 HEX 值貼進樣式表。同事寄給你線上網站的截圖;HEX 就明明白白顯示在 DevTools 中,但你需要 RGB 通道才能把這個顏色丟進 Photoshop 的色票庫。品牌指南列出 HEX;你的分析儀表板卻要 rgb() 語法。能夠不假思索地在格式之間轉換,是那種每週默默省下好幾小時的小技巧之一,而且完全不需要背誦 16 進位算術。
如何將 RGB 轉為 HEX(以及反向轉換)
- 開啟 RGB 轉 HEX 轉換器。它完全在你的瀏覽器中執行,所以不需要上傳任何東西，也無需安裝。
- 輸入紅、綠、藍三個數值到三個輸入框中。每個輸入框接受 0 到 255 之間的整數。當你輸入時,HEX 輸出會即時更新,即時預覽色塊也會立刻顯示對應的顏色。
- 從輸出欄位讀取 HEX 代碼。工具會將它標準化為小寫、六位數的格式,每個通道都會補零,所以 0 的值會顯示為 00,而不是單獨一個 0。使用輸出欄位旁的「複製」按鈕即可取得。
- 若要反向轉換,把任何 HEX 代碼貼進 HEX 欄位。像 #3b82f6 這樣的六位數代碼可以正常運作,像 #abc 這樣的三位數簡寫也可以——它會展開為 #aabbcc。前面的井字號可有可無,大小寫也不影響,所以 ABC、#abc 和 abc 都會解析為同一個顏色。
- 複製你需要的任何格式。同一個面板會在色塊旁顯示 HEX、RGB 與 HSL 三種數值,因此你可以複製下一個工具所期望的任一種表示法。
超出範圍或非整數的 RGB 通道會被限制在有效的 0–255 整數範圍內,而不是直接報錯;任何格式錯誤的 HEX(長度不對、出現非法字元)也會被明確標示出來,而不是靜默地產生錯誤的顏色。如果想更深入了解每對數字實際上的意義,RGB 轉 HEX 詳解:每對數字代表什麼 指南會一步步帶你走過其結構。
同時閱讀 HSL 與 RGB、HEX 的讀數
這個轉換器也會在 HEX 與 RGB 數值旁邊回報 HSL——色相、飽和度與亮度。HSL 是同一組顏色的第三種表示法,但它用人類更直覺的方式來描述色彩,這也是設計師想要微調而非從頭打造一個顏色時會選擇它的原因。
色相是色環上從 0 到 360 度的一個角度:0 是紅色、120 是綠色、240 是藍色,360 則繞回紅色。飽和度是 0 到 100 的百分比——0% 代表完全灰階,100% 代表該色相最鮮明的版本。亮度也是 0 到 100%——0% 是黑色、100% 是白色,50% 則是該色相的「純色」版本。
這讓 HSL 非常適合用於「把這個品牌藍調亮一點」或「把這個強調色降低 20% 飽和度」這類任務。你只需要在腦中調整一個數字,而不是猜測該動 RGB 三個通道中的哪一個。當結果看起來滿意時,直接把 HSL 轉回樣式表能用的 HEX 代碼即可。
值得牢記的基本顏色
六種顏色就涵蓋了任何入門者心理色票的基礎。下表列出這六種顏色及其精確的 RGB 與 HEX 值,取自你的螢幕、瀏覽器和設計工具所仰賴的同一個 24 位元色彩空間。一旦熟悉這六種,其他所有顏色都是同一概念的變化。
| 名稱 | 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 |
最後一列——RGB (59, 130, 246)——是個實用的解題範例。在 HEX 中,每個通道就是把十進位數字改寫為 16 進位:59 變成 3b、130 變成 82、246 變成 f6。加上開頭的 # 串在一起,結果就是 #3b82f6。這就是完整的轉換模式:每個十進位通道變成兩個十六進位數字,然後三對依紅綠藍順序組合在一起。
初學者在撰寫色彩代碼時常踩的坑
初學者大多數的色彩代碼錯誤都來自細小的格式細節,而非數學運算。有幾種模式出現得夠頻繁,值得特別提出來。
- 漏掉開頭的井字號。CSS 需要的是 #ff0000,而不是 ff0000。這個工具在輸入時把井字號視為可有可無,但大多數程式碼並非如此——請連同井字號一起複製。
- 不小心混用長寫與簡寫。#FFF 和 #FFFFFF 是同一個顏色,但 #FFFF 是無效的,#FFF0 則是這裡不支援的四位數表示法。請堅持使用三位數或六位數其中之一。
- 手動換算卻忘記補零。手算時把 #ff000 寫成 #ff0000 而不是 #ff0000,是個經典的失誤。轉換器永遠會輸出正確的每通道兩位數格式。
- 通道超出範圍。超過 255 或低於 0 的數值會被限制到最接近的有效整數,而不是直接報錯——這雖然方便,但也提醒你,工具並不會警告像這種「2550」的打字錯誤。
- 誤讀 HSL 色相角度。0 和 360 都是紅色;180 是青色,而不是藍色。色環的旋轉方向可能會讓新手感到意外。
這些問題一旦親自踩過一次都不算難,而一個可靠的轉換器搭配即時色塊,能讓你在錯誤的顏色進入正式環境之前更容易抓到這些問題。
學 RGB 與 HEX,其實就是學同一條規則的兩種寫法:三個通道,每個 0 到 255,想要代碼時每個通道寫成兩個十六進位數字。一旦這個模式被你掌握,你所遇到的每個 CSS 顏色、品牌色票和設計標記,都是這三個數字的新組合。RGB 轉 HEX 工具是把理論付諸實作的最快方式:輸入任何 RGB 三元組並讀回 HEX,或貼上任何 HEX 並讀取 RGB 與 HSL,搭配即時預覽——全部都在你的瀏覽器本地端執行,任何數值都不會被上傳到任何地方。
如果你正在權衡各種選擇,線上使用 RGB 轉 HSV 換器是否安全? 對此有詳細說明。