顏色轉換器
輸入十六進位顏色代碼，即可查看其對應的 RGB 和 HSL 值，以及紅、綠、藍各個通道的數值。
如何使用此顏色轉換器
- 輸入十六進位顏色代碼
在十六進位顏色代碼欄位中輸入 6 位數代碼（例如 FF6B35 或 00FF88）。請省略 # 符號。
- 讀取 RGB 數值
紅色通道、綠色通道和藍色通道的結果顯示每個分量的 0–255 數值。
- 查看 HSL 輸出
查看 HSL 結果中的色相 (0–360°)、飽和度和亮度 — 這對調整顏色非常有用。
此顏色轉換器的工作原理
此工具將十六進位顏色代碼轉換為 RGB（紅、綠、藍）和 HSL（色相、飽和度、亮度）表示形式。每個十六進位對應一個 8 位元通道值（0–255），HSL 轉換則使用標準色彩空間數學公式。
R = hex[0:2] → 十進位；G = hex[2:4] → 十進位；B = hex[4:6] → 十進位 Hex #FF6B35 → RGB(255, 107, 53) → HSL(16, 100%, 60%)。
Hex 000000 → RGB(0, 0, 0) → HSL(0, 0%, 0%) — 純黑色。
Hex FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%) — 純白色。Hex 808080 → RGB(128, 128, 128) → HSL(0, 0%, 50%) — 中灰色。
- ✓ 輸入值為有效的 6 位十六進位顏色代碼。
- ✓ 此版本不支援 Alpha 通道。
- CMYK 轉換需要色彩設定檔，此處不包含。
了解色彩模型
HEX、RGB 和 HSL 是描述同一種顏色的不同方式。HEX 將 RGB 編碼為 6 位數的十六進位字串：每對字元代表一個 8 位元通道 (0–255)。RGB 以三個數字表示相同的數值，即螢幕發出的加法三原色。HSL（色相、飽和度、亮度）是一個圓柱模型：色相是色輪上的角度（0° 為紅色，120° 為綠色，240° 為藍色），飽和度是色彩強度，亮度是明暗程度。設計師在以程式化方式調整顏色時通常偏好 HSL — 僅更改亮度即可在不改變色相的情況下使顏色變深或變淺，而調整飽和度則可調整鮮豔度。
開發者的顏色轉換應用場景
開發者在構建設計系統、實作主題、生成調色盤以及偵錯 CSS 時會進行顏色轉換。設計標記 (Design tokens) 通常以十六進位儲存顏色；轉換為 RGB 或 HSL 可實現執行時計算，例如不透明度疊加或無障礙對比度檢查。主題切換器可能需要使用 HSL 從基礎顏色衍生出較亮或較暗的變體。自動化無障礙工具會轉換顏色以計算亮度與對比率。在偵錯版面配置或主題錯誤時，將十六進位值視為 RGB 或 HSL 有助於識別哪個通道出現偏差。顏色轉換也用於資料視覺化、圖表庫和動態 UI 主題。
常見問題
我可以輸入 3 位數的十六進位代碼嗎？
目前此工具需要 6 位數代碼。若為 F60 等 3 位數簡寫，請先將其擴展為 FF6600。
什麼是 HSL？
HSL 代表色相 (Hue)、飽和度 (Saturation) 和亮度 (Lightness)。這是一種描述顏色的替代方式，部分設計師認為它比 RGB 更直觀。