即時 HSL 轉 HEX — 色相、飽和度、亮度直接換算十六進制色碼
輸入一組 HSL 顏色（色相 0–360 度、飽和度百分比、亮度百分比），這個頁面會即時顯示對應的十六進制（HEX）色碼。HEX 碼是六位（或三位縮寫）的 RGB 記法，例如 #1E90FF，廣泛用於 CSS 與設計工具。當你輸入或選擇顏色時，HEX 數值會立刻更新，與其他顏色模型（RGB、HSV、CMYK、LAB）同步變化。
HSL 與 HEX 的設計差異：為何這個轉換值得獨立存在
HSL（色相 Hue、飽和度 Saturation、亮度 Lightness）是專為人類直覺設計的色彩模型：調整亮度不改變色相，讓配色與主題生成變得直觀。HEX 則是 RGB 的十六進制表示，本質上是紅、綠、藍三個通道的濃縮寫法。這個頁面的獨特之處在於專注於 HSL 到 HEX 的單一轉換——這條路徑在 sRGB 色域內是無損且直接的，不像轉換到 LAB 或 CMYK 可能需要處理色域外的顏色調整。對於需要將 HSL 調色板導入 CSS 或設計軟件的使用者來說，即時獲得精準的 HEX 值就是最直接的需求。
輸入、輸出與邊界處理
輸入要求：
- 色相 (H)：0 至 360 的整數或小數（度）
- 飽和度 (S)：0% 至 100% 的百分比（必須包含
%符號） - 亮度 (L)：0% 至 100% 的百分比（同樣必須包含
%）
範例：243, 75%, 59%
主要輸出：六位 HEX 色碼（如 #4f46e5）。若 RGB 三個通道均可由單個十六進制數字表示，工具會同時顯示三位縮寫形式（例如 #abc）。所有其他顏色欄位（RGB、HSV、CMYK、LAB）都會同步更新。
錯誤處理：
- 若輸入值超出有效範圍（色相不是 0–360、飽和度或亮度不是 0–100%），或格式不正確（例如遺漏百分號），工具會顯示錯誤訊息：
「請輸入 HSL 格式：色相 0–360 加上兩個百分比，例如 243, 75%, 59%。」 - 轉換過程始終保持在可見 RGB 範圍內，無需進行色域外調整。
- CMYK 輸出僅供螢幕參考，可能與專業印刷數值不同。
- 所有處理都在瀏覽器內完成，不會上傳任何資料。
誰需要這個工具
- 設計師：在 HSL 中建立調色板後，需要 HEX 碼以便在程式碼或設計工具中實作。
- 前端開發者：從設計檔（如 Figma、Sketch）取得 HSL 數值後，必須轉換為 CSS 的 HEX 屬性。
- 主題調整者：透過修改 HSL 的亮度來控制 WCAG 對比度，然後將結果轉為生產環境用的 HEX 碼。
- 任何需要理解顏色在不同記法間如何對應的人。
延伸知識：HSL 轉 HEX 的背後原理
HSL 並非直接對應 HEX；它先轉為 RGB，再將 RGB 三個 0–255 的值轉為兩位十六進制。核心公式如下（簡化版）：
- 將飽和度與亮度轉為 0–1 範圍的十進制。
- 根據色相計算 RGB 的中間值。
- 將每個通道的值四捨五入到最接近的整數。
- 每個整數轉為兩位十六進制字串（若小於 16 則補零）。
- 串聯成
#RRGGBB。
例如：HSL(243, 75%, 59%) → RGB(79, 70, 229) → #4f46e5。
由於轉換只在 sRGB 色域內進行，不會像 LAB 或 CMYK 轉換那樣遇到色域外裁剪問題，因此結果必然落在可顯示範圍。
常見陷阱與注意事項
- 遺漏百分號：輸入
50而非50%會被當作無效格式，觸發錯誤提示。 - 色相超出 0–360：例如
400不會被接受；需手動歸一化。 - HEX 的 alpha 通道：六位 HEX 不包含透明度；如果需要 alpha，請使用八位形式（如
#4f46e580），但本工具當前僅輸出六位或三位。 - CMYK 僅供參考：CMYK 值是以螢幕 RGB 反向推算的估計值，與 Pantone 或印刷機的實際輸出有差距。
- 三位縮寫的使用條件：僅在 R、G、B 每個通道的兩個十六進制數字相同時（如
#aa33ff→#a3f）才會顯示。若通道值不同（如#4f46e5），則只顯示六位。
常見問題 (FAQ)
1. 為什麼我輸入 hsl(240, 100%, 50%) 卻得到 #0000ff 而不是 #00f？
工具會同時顯示六位與三位形式（若符合條件）。#0000ff 的紅色與綠色通道都是 00，藍色是 ff，滿足三位縮寫條件，所以應看到 #00f 也被列出。請檢查輸入格式是否完整。
2. HSL 可以直接用在 CSS 嗎？
可以。CSS 支援 hsl(240, 100%, 50%) 或 hsl(240 100% 50%)。但許多框架或舊版瀏覽器偏好 HEX，因此需要轉換。
3. 轉換後的顏色看起來跟螢幕上不同？
確保你的顯示器已校色。如果原先的 HSL 值來自不同色彩管理設定（如 Display P3），轉換回 sRGB 時可能略有偏移，但本工具基於 sRGB 標準。
4. 為什麼 CMYK 數值不像印刷廠給的那樣？
螢幕使用的 RGB 色域比 CMYK 大，轉換是純數學推算，未考慮油墨特性或印刷方式。請以專業 ICC 設定檔為準。
5. 我可以一次轉換多個 HSL 數值嗎？
本頁面每次處理一個數值。若需批量轉換，可考慮使用瀏覽器主控台或編寫腳本，利用 CSS 或 Canvas API 進行轉換。
6. 輸入時需要打「度」或「%」符號嗎？
色相值只需數字（0–360）；飽和度與亮度必須附上 % 符號（如 75%）。遺漏百分號會觸發錯誤提示。