什麼是 HEX 與 HSL？——兩種色彩模型的快速釐清
這個頁面只做一件事：你貼上一個十六進位色碼（HEX），比如 #1E90FF 或 #abc，它立刻回傳對應的 HSL 值（色相 0–360 度、飽和度 0–100%、亮度 0–100%），同時顯示該顏色在 HEX、RGB、HSV、CMYK、LAB 五種格式下的數值。所有欄位在你編輯的瞬間同步更新。
HEX 是原始 RGB 的濃縮寫法：六位十六進位數字（或三位縮寫）直接編碼紅、綠、藍三個通道。它體積小、在 CSS 和設計工具中隨處可見，但你無法直覺地靠它調整顏色——例如想把某個藍色變暗 20%，你只能重新計算十六進位數值。HSL 則是為人類思考設計的結構：色相用度數標記色環位置，飽和度和亮度用百分比表達。改變亮度時，色相完全不動；這正是 HSL 成為調色板與主題系統首選格式的原因。
標準 HEX（六位或三位）不攜帶透明度資訊，HSL 本身也沒有 Alpha 通道。這個轉換永遠處理完全不透明的顏色。
從 HEX 到 HSL 的轉換邏輯（六位與三位縮寫）
轉換的底層方法是先將十六進位字串解碼為 0–255 的 RGB 值。六位 #4f46e5 中，4f = 79、46 = 70、e5 = 229。三位縮寫 #abc 則視為 #aabbcc，也就是每個十六進位數字重複一次。轉換公式使用標準的 RGB 到 HSL 演算法：
- 將 R、G、B 歸一化到 0–1 範圍。
- 找出最大值與最小值，計算明度（Lightness）：
L = (max + min) / 2。 - 若 max = min，則飽和度為 0，色相未定義；否則飽和度
S = (max − min) / (1 − |2L − 1|)，色相H根據哪個分量是最大值決定，最後標準化到 0–360 度。
頁面會幫你算好，你只需要關心結果。唯一要注意的是輸入必須是有效的六位或三位十六進位色碼，可以帶或不帶前綴 #。如果打入 #GGG 或 xyz，頁面會顯示：「請輸入如 #4f46e5 或 #abc 的十六進位色碼。」
為什麼 HSL 比 HEX 更適合人眼操作？
前端開發者拿到一個設計稿上的 hex 色——例如品牌藍 #1E90FF——想做出 hover 時稍微暗一點的效果。在 HEX 中你得分別調低 R、G、B 數值，很可能把色調弄偏。但在 HSL 裡你只需要降低亮度（Lightness），色相和飽和度維持不變。同理，想產生一組 monochromatic 色板，固定色相並逐步調整亮度與飽和度即可。這正是 CSS 原生支援 hsl() 與 hsla() 的原因——你可以用 CSS 自訂屬性（custom properties）動態操控變體。
UI/UX 設計師思考顏色的方式也是色相、飽和度、亮度。一張十六進位色碼表對他們來說是黑盒子，但 HSL 數值可以直觀地告訴你：「這是一個綠色，偏灰，中等亮度」。網頁無障礙稽核人員則可以藉由 HSL 快速鎖定色相，只調整亮度來達到 WCAG 要求的對比度（例如 4.5:1），而不必猜測 RGB 組合。
輸入限制與邊界情況：色域、CMYK 與即時計算
頁面只接受有效的六位或三位十六進位色碼（含 # 或不含）。如果你在 LAB 或 CMYK 欄位輸入一個數值，而該顏色位於可顯示 RGB 色域之外（例如飽和度極高的螢光色），頁面會將顏色調整為最接近的可顯示顏色。此時回頭轉換回 HEX，數值可能與原始輸入略有偏移——這是因為螢幕本身色域限制，不是 Bug。
CMYK 數值是純螢幕估算，應只用於參考，不能用於專業印刷而不經校正。所有轉換都在你的瀏覽器內完成，你輸入的任何資料都不會被上傳或儲存。
同時顯示多種色彩空間的實用價值
這個頁面不只是 HEX → HSL 轉換器。它同時展示 RGB、HSV、CMYK、LAB 四個額外格式。為什麼？因為不同工作階段需要不同模型：
- HEX：CSS 設定、設計工具複製。
- RGB：影像處理、硬體控制。
- HSV：色彩挑選器常見底層模型（色相、飽和度、明度）。
- CMYK：印刷前預覽（但記住它是估算）。
- LAB：設備無關、感知均勻的色彩空間，常用於色彩比對與調整。
你不需要切換頁面就能複製任何一種格式，減少出錯機會。
常見問答（FAQ）
Q: 我可以輸入像 fff 這樣沒有 # 的色碼嗎？
可以。頁面會自動補上 #，辨識為 #ffffff（六位）或 #ffffff（若只輸三位）。
Q: 為什麼 HSL 的色相是 0–360，而飽和度與亮度是百分比？
色相單位是度數，對應色環上的角度（0°=紅，120°=綠，240°=藍）。飽和度 0% 表示灰色，100% 表示純色；亮度 0% 是黑，100% 是白。
Q: 轉換結果的 HSL 小數點後位數是固定的嗎？
H 值顯示到小數點後一位（例如 212.5°），S 與 L 顯示到百分比整數。這是實務上夠用的精確度。
Q: 如果我輸入一個無效字串，頁面會當機嗎？
不會。頁面會顯示錯誤訊息：「請輸入如 #4f46e5 或 #abc 的十六進位色碼。」不會執行任何計算。
Q: 在 LAB 或 CMYK 輸入色域外的顏色後，HEX 會變嗎？
會。頁面會強制將該顏色調整到最接近的可顯示 RGB 色域內，因此 HEX 值可能與你預期的不同。這種情況通常發生在超高飽和度或極端亮度的顏色上。
Q: 這個轉換可以離線使用嗎？
可以。所有程式碼在瀏覽器本機執行，不需要網路連線。