這個工具支援所有CSS十六進位寫法：6位數#3366cc、3位數簡寫#36c，以及帶透明度通道的4位數和8位數形式，有沒有加#都可以。結果會顯示hsl()或hsla()字串、各項數值和逐步換算細節，還有一列反向的HSL轉HEX。所有運算都在瀏覽器本機完成，不用上傳、不用註冊，也沒有使用次數限制。
HEX轉HSL色碼轉換
全程在瀏覽器裡執行，免上傳、免註冊。
CSS
hsl(220, 60%, 50%)換算方式
色相220
飽和度60%
明度50%
反過來？HSL轉HEX
#3366ccHEX色碼怎麼轉換成HSL？
先把十六進位色碼讀成紅、綠、藍三個數值（0-255），再用色相、飽和度和明度重新描述同一個顏色。色相是色環上的角度（0-360），飽和度代表顏色有多鮮豔（0-100%），明度代表顏色有多亮（0-100%）。#3366cc換算後就是hsl(220, 60%, 50%)。這個工具會在你輸入的同時完成換算。
使用方式
- 1輸入十六進位色碼. 輸入或貼上色碼，例如#3366cc（或#36c），也可以用色票直接選。#號可加可不加。
- 2查看HSL結果. hsl()字串、各項數值和顏色預覽會隨輸入即時更新，並顯示色相、飽和度和明度是怎麼算出來的。
- 3複製你需要的格式. 點擊hsl()字串或原始數值旁邊的複製按鈕。需要反過來轉換？在下方輸入色相、飽和度和明度即可取得對應的色碼。
適合誰用
- 前端工程師把十六進位色碼轉成hsl()，方便調整明度來做出hover和focus狀態，不用重新挑一個顏色。
- 設計配色的設計師固定色相，逐步調整飽和度和明度，從單一品牌色延伸出深淺不同的色調。
- 設計主題與design token的開發者把顏色存成HSL格式，因為手動閱讀和調整都比十六進位字串直覺得多。
- 需要對照顏色的人在只吃十六進位的工具（Figma、大部分CSS）和只吃HSL的工具（SCSS輔助函式、部分色彩系統）之間切換。
常見問題
這個HEX轉HSL工具免費嗎？
免費，不用註冊，也沒有使用次數限制，全部在瀏覽器裡運作。
我輸入的顏色會被上傳到哪裡嗎？
不會。換算只是裝置上執行的JavaScript，不會把任何資料傳到伺服器，頁面載入完成後離線也能繼續使用。
HSL是什麼？
HSL代表色相、飽和度和明度。色相是色環上0到360度的角度，飽和度代表顏色有多鮮豔，從0到100%，明度則從0%（黑色）經過50%的純色一路到100%（白色）。
怎麼手動把HEX換算成HSL？
把十六進位色碼換算成紅、綠、藍，再各自除以255。取三者的最大值和最小值：明度是兩者的平均，飽和度是（最大值減最小值）除以（1減|2L減1|的絕對值），色相則看哪個色版數值最大，再換算成0-360度。
支援#36c這種3位數簡寫嗎？
支援。CSS簡寫裡每一位都會重複一次，所以#36c會展開成#3366cc，換算結果是hsl(220, 60%, 50%)。4位數形式原理相同，最後一位是透明度。
怎麼處理透明度（HSLA）？
8位數十六進位色碼的最後一組就是透明度。這個0-255的位元組會除以255，換算成hsla()需要的0-1數值並四捨五入到小數點後三位，所以#3366cc80會變成hsla(220, 60%, 50%, 0.502)。
可以反過來把HSL轉成HEX嗎？
可以。在結果下方的HSL轉HEX欄位輸入色相（0-360）以及飽和度和明度（0-100%），就能立即取得對應的十六進位色碼，超出範圍的數值會被限制在合理區間內。
為什麼HSL比十六進位好用？
HSL對人來說更好理解：提高L就能讓顏色變亮，降低S就能讓顏色變淡，調整H就能換一整個色系，完全不用猜十六進位數字。這讓它很適合用來做出協調一致的配色、hover狀態和design token。