HEX 到 HSL：直覺配色與原始編碼之間的橋樑
將一個六位十六進制顏色代碼（例如 #1E90FF）或三位簡寫（例如 #abc）貼入工具，頁面立即傳回對應的 HSL 值——色相以度數表示（0–360），飽和度與明度以百分比表示（0–100%）。與此同時，顏色亦會以 HEX、RGB、HSV、CMYK 及 LAB 格式並列顯示，方便你直接複製所需格式。整個轉換過程在瀏覽器內完成，輸入數據不會上傳或儲存。
HEX 與 HSL 的本質差異
HEX 是原始 RGB 的十六進制編碼。六位數字（如 #4f46e5）其實是分別代表紅、綠、藍三個通道的兩組十六進制數——4f、46、e5——直接對應 0–255 的 RGB 數值。三位簡寫（如 #abc）則是將每位重複一次：a、b、c 展開為 aa、bb、cc，即 #aabbcc。這種格式緊湊，廣泛用於 CSS 與設計工具，但對人類來說並不易於直觀調整。
HSL 則專為人類推理而設計。色相（Hue）放在一個 0–360 度的色輪上——0 度是紅色，120 度是綠色，240 度是藍色——讓你從顏色類別出發。飽和度（Saturation）以百分比控制色彩強度：0% 變成灰色，100% 為純色。明度（Lightness）同樣是百分比：0% 是黑色，100% 是白色，50% 則是最純淨的顏色（例如純紅的 HSL 為 0, 100%, 50%）。調整明度而不改變色相，就能輕鬆生成同色系的不同深淺，這是 HSL 最核心的優勢。
相比 HEX 那種「改一個十六進制數字就可能完全改變顏色外觀」的特性，HSL 讓設計師與開發者能夠像調色盤一樣直覺操作：保持色相不變，只拉高明度來做懸停效果，或者降低飽和度來適應無障礙對比度要求。
輸入輸出與同步顯示
頁面只接受有效的六位或三位十六進制代碼，可以帶或不帶前導 #。輸入無效值時會顯示錯誤訊息：「Enter a hex color like #4f46e5 or #abc.」。一旦輸入正確代碼，六個格式欄位同時更新：
| 格式 | 範例 |
|---|---|
| HEX | #4f46e5 |
| RGB | rgb(79, 70, 229) |
| HSL | hsl(244, 74%, 59%) |
| HSV | hsv(244, 69%, 90%) |
| CMYK | cmyk(65%, 69%, 0%, 10%) |
| LAB | lab(34, 46, -69) |
CMYK 數值是基於 RGB 色域估算得來，不應用於專業印刷工序而未經校準。如果切換到 LAB 或 CMYK 輸入模式（假如工具提供雙向輸入——但此工具只接受 HEX 輸入，其他格式僅供顯示），輸入超出可見 RGB 色域的數值時，顏色會被調整至最近的顯示顏色，再轉回 HEX 可能出現輕微偏移。這是所有色域轉換工具的共同限制。
邊界情況與處理規則
- 無 Alpha 通道：標準六位或三位 HEX 不包含透明度資訊，HSL 本身亦無 Alpha 分量。轉換始終處理完全不透明顏色。如果需要透明度，應使用
rgba()或hsla()配合八位 HEX（此工具不支援）。 - 三位簡寫展開：
#abc自動展開為#aabbcc，即紅、綠、藍各 17 級（因為0xaa= 170，0xbb= 187，0xcc= 204）。 - 所有轉換在本地進行：沒有數據離開你的瀏覽器。這意味著即使離線（若頁面已載入），轉換功能仍然可用。
誰需要這個工具
前端開發者經常從設計稿取得 HEX 色值，然後需要轉成 HSL 以利於撰寫 CSS 自訂屬性（custom properties）。例如將品牌主色定義為 --primary: hsl(244, 74%, 59%)，然後透過調整明度快速生成 --primary-hover: hsl(244, 74%, 65%) 或 --primary-dark: hsl(244, 74%, 40%)，無需反覆查閱十六進制對應表。
UI/UX 設計師習慣以色相、飽和度、明度思考。當品牌指南只給了一個 hex 碼時，他們需要知道它的 HSL 成分才能建立配色系統——互補色只需將色相加減 180 度，類似色則在色相附近微調。
建立調色板的人會發現 HSL 極其方便：固定飽和度與明度，依序改變色相就能生成均勻分佈的色板；或者固定色相，只調整明度來獲得從深到淺的漸變。
無障礙審計員需要驗證文字與背景的對比度。HSL 的明度百分比比 HEX 或 RGB 更直觀地反映亮度，便於快速判斷是否需要提高對比以符合 WCAG AA/AAA 標準。
數學轉換：RGB 到 HSL 的原理
工具背後依循標準轉換算法。首先將 HEX 分解為 R、G、B 的 0–255 整數，然後歸一化至 0–1 範圍。設 M = max(R, G, B)，m = min(R, G, B)，Δ = M - m。
- 明度 L = (M + m) / 2
- 飽和度 S：若 Δ = 0，S = 0；否則 S = Δ / (1 - |2L - 1|)
- 色相 H：若 Δ = 0，H 未定義（一般設為 0）；否則根據最大值計算，並歸一化到 0–360 度。
例如 #4f46e5：R=79, G=70, B=229，M=229, m=70, Δ=159。L = (229+70)/2/255 ≈ 0.586（即 58.6%）。S = 159/(1 - |2*0.586 - 1|) ≈ 0.735（即 73.5%）。H 計算得約 244 度。這就是工具給出 hsl(244, 74%, 59%) 的由來（四捨五入至整數）。
HSL 與 HSV：不要混淆
兩個模型都使用色相（H），但對於飽和度和亮度的定義不同。HSL 的明度（Lightness）是從黑（0%）到白（100%）的線性混合，中間點（50%）是純色。HSV 的明度（Value）則是最亮分量的最大值，飽和度是該最大值與最小值的差距除以最大值。結果是：HSV 的飽和度在較暗顏色時會自然降低，而 HSL 的飽和度在明度極端時（接近 0% 或 100%）也會降到 0%。實務上，CSS 使用 HSL，而圖像編輯軟件常用 HSV/HSB。轉換時需注意兩者差異，不可混用。
常見問題（FAQ）
問：輸入三位數 HEX 例如 #abc，轉換結果是否與 #aabbcc 相同？
答：是的。三位簡寫只是六位數的壓縮形式，每個數字重複一次。所以 #abc 等於 #aabbcc。
問：HSL 與 HSV 有何分別？為什麼工具同時顯示兩者？
答：HSL 的明度是從黑到白，HSV 的明度是從黑到最亮純色。工具顯示 HSV 是為了相容 Photoshop、Figma 等軟件的色盤，讓你可以直接複製使用，不必再另行轉換。
問：為什麼 CMYK 數值只能用作估計？
答：CMYK 是印刷用的減色法模型，色域比 RGB 窄。從 RGB 直接轉換 CMYK 沒有考慮油墨特性與紙張材質，因此數值不精確。專業印刷必須使用 ICC 色彩描述檔進行轉換。
問：輸入超出 RGB 色域的 LAB 或 CMYK 數值會怎樣？
答：此工具只接受 HEX 輸入，因此不存在從 HSL 輸入超出色域的情況。但如果你在其他雙向工具中遇到類似情況，顏色會被剪裁至最接近的顯示顏色，轉回 HEX 時可能出現差異。
問：工具會儲存我輸入的顏色嗎？
答：不會。所有轉換在瀏覽器內完成，沒有任何數據離開你的裝置，也無後端伺服器接收你的輸入。
問：我可以從 HSL 反過來轉換為 HEX 嗎？
答：這個頁面設計為只接受 HEX 輸入，並輸出包括 HSL 在內的多種格式。如果你需要從 HSL 轉回 HEX，可以使用同網站其他對應頁面（例如 HSL to HEX）。