RGB 和 HEX 描述的是完全相同的 16,777,216 色空間，因此你在一種標記法中能表達的每一個色調和變化，在另一種標記法中也同樣可以呈現。HEX 把每個顏色寫成 #RRGGBB，其中每兩個一組的數字對以十六進位形式編碼一個 RGB 通道——00 到 FF 涵蓋 0 到 255 的範圍。RGB 則把同一個顏色寫成三個獨立的整數——紅、綠、藍——每個都在 0 到 255 之間。「色調與變化」這個說法只是指對這三個數字進行任何刻意的調整:更淺的淡色、更深的陰色、更柔和的色調，或是更鮮豔、更飽和的基色版本。因為底層的色彩空間完全相同，在 RGB 與 HEX 之間轉換並不會改變實際的顏色，只會改變數值的書寫方式。這種可互換性正是讓這兩種格式在 CSS、HTML、影像編輯器以及 Figma 和 Photoshop 等設計工具中同樣好用的原因。對開發者和設計師來說，在它們之間互相轉換是每天都會遇到的工作——無論是樣式表中的十六進位代碼需要被讀取為通道值，還是設計師提供的 RGB 規格需要以十六進位字串的形式放進 CSS 檔案中。
理解 RGB 與 HEX 中的色調與變化
設計師會用一套簡單的詞彙來討論顏色變化。陰色(shade)是把基色變暗，通常是將每個 RGB 通道朝零調低。淡色(tint)則是把同一個基色變亮，通常是將每個通道朝 255 調高。色調(tone)是較柔和或偏灰的版本，做法是讓每個通道彼此靠近，使顏色看起來更接近中性。以 RGB 的方式來說，陰色和淡色通常是對三個通道同時加上或減去相同的量;色調則是把每個通道往共同的中心點拉近。
在 HEX 中，這些完全相同的變化只是呈現為不同的數字對組合。紅色的陰色 (180, 0, 0) 是 #B40000，而紅色的淡色 (255, 180, 180) 則是 #FFB4B4。十六進位的數字只是同一組數字的另一種進位表示方式，這正是 RGB 轉 HEX 色調變化工作的核心理念:陰色就是這個顏色，轉換只是在兩個標記法之間翻譯同一個數值。你在一種標記法中能寫出的任何東西，都可以在另一種標記法中表達，而不會損失任何精確度。
每次色調調整背後的通道運算
一組十六進位的數字對會把一個通道編碼為兩個十六進位數字。左邊的數字是 16 位數，右邊的則是個位數，因此這組數字涵蓋了 0–255 的十進位範圍。要把 RGB 數值轉成 HEX，每個通道都會被拆解成 16 進位與 1 進位的組成，再寫成兩位數字。要把 HEX 轉回 RGB，則是把每組數字對讀回十進位數字。這樣的運算是對稱的——不論哪個方向都不會改變顏色。
一個清楚的計算範例是現代設計系統中常見的 UI 藍色:RGB (59, 130, 246)。每個通道會分別轉換:
- 59 的十六進位:3 × 16 + 11 = 59 → 3B
- 130 的十六進位:8 × 16 + 2 = 130 → 82
- 246 的十六進位:15 × 16 + 6 = 246 → F6
組合在一起，(59, 130, 246) 變成 #3B82F6。輸出會被標準化為小寫，因此標準形式是 #3b82f6。若要把同一個藍色調整為更深的陰色，就讓每個通道等量降低;若要變亮，則讓每個通道等量提高。十六進位的數字會與通道同步變動，結果是同一個色相但不同的亮度。因為 HSL 用更符合人類直覺的方式描述同一個顏色——色相是 0 到 360 度的角度，飽和度與亮度則是 0–100% 的數值——通常會比較容易先在 HSL 中調整色調變化(降低亮度幾個百分比來得到陰色、提高亮度來得到淡色、降低飽和度來得到色調)，然後再把結果轉回樣式表可用的十六進位代碼。若想深入了解每組數字對的實際意義，《RGB 與 HEX 完整解析:每組數字對的意義》這份指南會更詳細地說明十六進位與十進位的對應關係。
在瀏覽器中將 RGB 色調變化轉為 HEX
要在 RGB 與 HEX 之間轉換任何色調變化，最快的方法就是使用專門的轉換工具。RGB 與 HEX 轉換工具完全在你的瀏覽器中執行，提供雙向的轉換功能，並搭配即時預覽，讓你在複製之前可以確認色塊。以下是進行色調工作時的使用方式:
- 在 RGB 輸入欄位中輸入紅、綠、藍三個通道的數值，每個都是 0 到 255 之間的數字。
- 即時色塊會隨之更新，並在旁邊顯示對應的 HEX、RGB 與 HSL 數值。
- 若想探索更暗或更亮的變化，調整一個或多個通道，十六進位數值就會隨每次按鍵更新，讓你即時反覆嘗試淡色、陰色與色調。
- 若要反向轉換，把像 #3b82f6 這樣的 HEX 顏色，或是像 #abc 這樣的簡寫，貼到 HEX 欄位中，RGB 與 HSL 的數值就會自動填入。
- 點擊你所需格式(HEX、RGB 或 HSL)的「複製」按鈕，然後直接貼到你的樣式表、設計檔或筆記中。
因為所有處理都是透過 JavaScript 在你自己的裝置上執行，不會有任何資料上傳到伺服器。這能確保品牌色票與未公開的顏色完全保密。這個轉換工具也能處理三位數的簡寫形式:#abc 會變成 #aabbcc,#f00 會變成 #ff0000,#fff 會變成 #ffffff。輸入不區分大小寫，# 號可有可無，因此 abc、ABC 與 #abc 都會解析為同一個顏色。輸出會一律標準化為小寫、六位數的形式，每個通道以零補滿，因此通道值 0 會顯示為 00，而不是單獨的 0——這是手動轉換時容易出錯的小細節。超出範圍或非整數的通道值會被限制在有效的 0–255 整數範圍內，而不是直接報錯;任何格式錯誤的十六進位(長度錯誤或含有非法字元)也會清楚標示出來，而不是產生一個靜默錯誤的顏色。
RGB 與 HEX 色彩空間中的參考顏色
在你開始嘗試色調變化時，一些廣為人知的數值是很好的起點。它們涵蓋了色彩立方體的各個角落，以及許多設計師經常使用的典型 UI 藍色。
| 顏色 | 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 |
這六個參考值也揭示了數字對的運作方式。在 #000000 中，每個通道都處於最小值;在 #ffffff 中，每個通道都處於最大值。從 #ff0000 往 #3b82f6 移動時，藍色通道維持高值，同時降低紅色並加入綠色——其底層的變化其實就是一條平滑的通道滑動曲線。轉換工具的即時色塊會在你輸入時把這種過渡視覺化，這是在把顏色複製到程式碼或設計檔之前，確認你拿到精確色調的最簡單方式。因為每個通道彼此獨立，所以只要調整其中兩個相關的數字，就能產生這些參考顏色中任何一個的色調變化，而不必更動其他四個數字。
色調變化轉換的實際應用
只要設計師用一種標記法交付規格，而開發者需要另一種時，就會用到 RGB 與 HEX 之間的轉換。常見的情況是，從品牌風格指南中取得一個 RGB 三元組，然後以十六進位字串的形式放進 CSS 中。反向的情況也很常見——從現有的樣式表中讀出一個十六進位數值，再轉回 RGB 通道，以便讓影像編輯器或 canvas 工具能取樣到完全相同的顏色。設計師也會利用這種轉換來記錄品牌色:在一份參考表中同時收錄基色與多個色調變化(hover 狀態、active 狀態、柔化的背景、可存取性的配對)，讓整個團隊都能直接複製使用。
與 HEX 和 RGB 數值並列顯示的 HSL 數值，對色調工作特別實用。HSL 用色相角度(0 到 360 度)，加上以 0 到 100 百分比表示的飽和度與亮度，來描述同一個顏色。這種模式符合人類對顏色的直覺:把品牌藍調亮幾個百分比以做出 hover 狀態，或降低飽和度以做出柔和的 disabled 狀態，然後再把結果直接轉回樣式表可用的十六進位代碼。對於圍繞色調家族建立的色票，《RGB 與 HEX 色票靈感:從通道建立配色方案》這份指南會說明如何把這些變化串連成一組完整配色的實際做法。
最後，色調變化轉換在無障礙工作中也經常會用到。基色與同一色相的較深變化版本，常被用來做為前景與背景的配對;能夠即時在 RGB 與 HEX 之間轉換，讓你可以輕鬆地把兩個數值都送進對比檢查工具中。因為每次轉換都在你的瀏覽器本地執行，你可以放心嘗試品牌色與尚未公開的色調，不必擔心因為上傳而外洩——這在色票仍在保密階段時特別重要。