這個頁面做什麼
你輸入一組 HSL 色彩——色相（0–360 度）、飽和度（百分比）與明度（百分比）——這個頁面立刻顯示對應的十六進位（HEX）色碼。HEX 碼就是 CSS 與設計工具裡通用的六位數（或三位數縮寫）表示法，例如 #1E90FF。當你輸入或選取顏色時，HEX 值會即時更新，同時 RGB、HSV、CMYK、LAB 等所有其他色彩欄位也會同步變動。
這個頁面有什麼不同
這個頁面專注於 HSL 到 HEX 的轉換，而不是一個泛用的色彩轉換器。HSL 是為了人類直覺思考顏色而設計的模型——改變明度就能保持色相不變，這也是為什麼它常被用來產生色票與主題色。HEX 則是六位數（或三位數縮寫）的 RGB 標記法，六位數本身不包含透明通道（除非使用八位數形式）。從 HSL 轉到 HEX 的過程直接且無損，因為兩者都在 sRGB 色域內；不像轉到 LAB 或 CMYK 可能需要調整超出色域的顏色。
輸入與輸出規則
- 輸入：使用者提供色相值（0–360）、飽和度百分比（0–100%）與明度百分比（0–100%）。範例：
243, 75%, 59%。百分比必須附上%符號，否則工具無法正確解析。 - 輸出：主要輸出為 HEX 色碼，例如
#4f46e5。如果 RGB 的三個通道各自都能用單一個十六進位數字表示（像#aabbcc），工具也會顯示三位數的縮寫形式（#abc）。所有其他色彩欄位（RGB、HSV、CMYK、LAB）會同時更新，提供完整的色彩資訊。 - 錯誤處理：如果 HSL 值超出有效範圍（色相 0–360、飽和度 0–100%、明度 0–100%），或者格式不正確（例如缺少
%符號、用了逗號以外的分隔符），工具會顯示錯誤訊息：「請輸入 0–360 的色相以及兩個百分比，例如 243、75%、59%。」
HSL 與 HEX 的技術關係
HSL 是基於 RGB 的衍生模型。色相（H）對應色環上的角度，飽和度（S）控制顏色中灰階的比例，明度（L）則決定整體亮度。將 HSL 轉成 HEX 的標準演算法分兩步：先將 HSL 轉為 RGB 值（範圍 0–255），再將每個 RGB 通道轉成兩位十六進位數。例如，hsl(243, 75%, 59%) 對應的 RGB 是 (79, 70, 229)，轉換後得到 #4f46e5。這個轉換是線性且可逆的，不會有資訊損失。
值得注意的是，HEX 沒有直接反映明度或飽和度的維度——兩個完全不同的 HSL 值可能得到相同亮度但不同色相的 HEX 碼，反之亦然。另外，標準六位 HEX 不支援透明通道（需要八位數如 #4f46e580），而 HSL 本身也沒有 alpha 參數（除非擴展為 HSLA）。
實務應用場景
- 設計師：在 HSL 中建立配色方案（例如調整明度產生漸層），然後取得 HEX 碼以交付開發人員或在程式碼中使用。
- 前端開發者：從 Figma、Sketch 等設計稿取得 HSL 數值，需要轉成 CSS 的
color屬性（接受 HEX 或rgb()），這個工具提供最直接的轉換。 - 無障礙配色：為了滿足 WCAG 對比度標準，你可以在 HSL 調整明度（L）同時保持色相（H）與飽和度（S）不變，然後將結果轉為 HEX 用於生產環境。例如將明度從 40% 提高到 60%，對比度通常會增加，色調卻不會偏移。
- 主題產生器：許多 UI 框架（如 Tailwind CSS）的色板透過調整 HSL 明度來產生深淺色階，最後需要 HEX 碼來定義 CSS 變數。
常見錯誤與邊界情況
- 百分比符號遺漏：只輸入
75而非75%會導致工具無法判定該值為飽和度或明度，觸發錯誤訊息。 - 色相超出範圍：色相接受 0–360，但角度值也可以包含小數（如 243.5），但負數或超過 360 的值會被拒絕。
- 三位數縮寫規則：只有當 RGB 三個通道各自能被兩個相同數字表示時（例如
#ffccbb→#fcb不正確，因為 f 與 c 不同），才可以使用三位數縮寫；工具會依據標準規則顯示縮寫形式供參考。 - CMYK 為螢幕估算：頁面上顯示的 CMYK 值是數學轉換的結果，不考慮印刷油墨特性或色域限制，因此不應直接作為印刷輸出的數值。
- 隱私：所有轉換都在你的瀏覽器中完成，沒有資料上傳到伺服器。
與其他色彩空間轉換的比較
HSL 轉 HEX 比 LAB 轉 CMYK 或 LAB 轉 HEX 簡單得多，關鍵在於色域。HSL 與 RGB（HEX 的底層）都定義在同一個 sRGB 色域內，轉換是雙向可逆且無須裁切。相對地，LAB 涵蓋人眼可見的所有顏色，轉到 sRGB 時部分顏色可能落在 sRGB 範圍之外，這時必須進行色域壓縮或裁切，導致色彩偏移。CMYK 更複雜，因為它依賴於特定的油墨與紙張組合，且色域比 sRGB 小。因此 HSL 到 HEX 始終保持色彩精確，不會遇到無法呈現的問題。
常見問題（FAQ）
問：為什麼轉換出來的 CMYK 數值跟我在印刷廠看到的數字不一樣？
答：頁面上的 CMYK 是根據標準數學公式從 RGB 推算的預估值，不考慮印刷設備的實際特性（如紙張、油墨、印表機曲線）。若要取得精確的印刷 CMYK，應使用專業色彩管理軟體或諮詢輸出中心。
問：HSL 轉 HEX 會不會損失顏色資訊？
答：不會。只要原始 HSL 值在 sRGB 色域內（所有符合 0–360、0–100%、0–100% 的 HSL 都在 sRGB 內），轉成 HEX 時是精確的一對一對應，沒有捨入誤差或色彩裁減。反過來從 HEX 轉回 HSL 也會得到原始數值（可能因有限位數有小數差異，但人眼無法分辨）。
問：什麼時候該用三位數的 HEX 縮寫？
答：當 HEX 碼的六個字元為 #aabbcc、#ff0000 等格式時，可以縮寫為 #abc、#f00。CSS 支援這種寫法，也可以用來減少 CSS 檔案大小。如果你的顏色不符合這個模式（如 #4f46e5），就無法使用縮寫。
問：我輸入時用了全形逗號或空格，會怎麼樣？
答：工具預期輸入格式為「色相, 飽和度%, 明度%」，可以用半形逗號與空格分隔。如果使用全形字元或混用分隔方式，工具可能無法正確解析，並顯示錯誤訊息。請檢查輸入格式，必要時刪除多餘空白。
問：這個工具會儲存我輸入的顏色資料嗎？
答：不會。所有處理都在你的瀏覽器內部執行，沒有任何資料被傳送到伺服器或本地儲存。每次關閉頁面或重整後，資料就會消失。
問：如果我輸入的色相值有小數，例如 243.7，結果正確嗎？
答：色相接受小數角度（例如 243.7），轉換時會維持精確度。只要值在 0–360 範圍內且其他欄位格式正確，工具就會根據該數值計算對應的 HEX 碼。