同一個顏色在不同工具裡有不同寫法：設計稿給你 HEX，CSS 想調亮暗時 HSL 最好改，Figma 與 Photoshop 的取色面板顯示 HSB，Canvas 與 shader 又只吃 0–255 的數值通道。這個轉換器把 HEX、RGB、HSL、HSV 四種寫法並排放在同一頁，改任何一格，其他三格立刻跟著更新。
使用步驟
- 最上方是預覽色塊與色彩選擇器。選擇器是瀏覽器原生的
<input type="color">，所以你看到的是自己作業系統的取色面板，選完立刻套用。 - HEX 欄位接受 6 位十六進制，
#可以省略（會自動補上），大小寫都行。注意它是**離開欄位時**才套用——貼上後請按 Tab 或點旁邊空白處，格式不合會在下方顯示錯誤。 - RGB 三格是 0–255 的整數輸入框，超出範圍會被夾回邊界。
- HSL 與 HSV 各三格：H 是 0–360，S / L / V 是 0–100，全部只收整數。
- 四張卡片右上角各自有獨立的複製按鈕，複製出來的是
#3b82f6、rgb(59, 130, 246)、hsl(217, 91%, 60%)、hsv(217, 76%, 96%)這種可直接貼進 CSS 或設計工具的字串。 - 所有欄位都是雙向的。內部一律先換算成 RGB 再推導其他三種，所以不管你從哪一格改，四格永遠指向同一個顏色。
什麼時候用得上
把設計稿的 HEX 變成可以微調的 HSL
要做 hover 或 disabled 狀態時，#3b82f6 沒辦法直接「調暗 10%」。轉成 hsl(217, 91%, 60%) 之後，只動 L 就能得到同色系的深淺變化，H 與 S 保持不變，色調不會歪掉。調完再從 HEX 欄位複製回去。
對上設計工具的 HSB 數值
Photoshop、Figma、Sketch 的取色器用的是 HSB，而 HSB 就是這裡的 HSV——同一套模型，只是 B（Brightness）與 V（Value）名稱不同。設計師報「H 217 / S 76 / B 96」時，填進 HSV 三格就能拿到工程端要的 HEX，不必猜。
取出 0–255 通道值給程式用
Canvas 的 fillStyle、SVG 的 stop-color、WebGL 的 vec3、或是要手動組 rgba(59, 130, 246, 0.5) 的半透明陰影，都需要拆開的 R / G / B 數字。把 HEX 貼進來就能直接讀走三個通道值。
核對設計系統的色階是否連續
把色票裡的 50、100、200……900 逐一貼進 HEX 欄位，看 HSL 的 L 值是否按預期遞減、H 是否一致。實務上手工調出來的色階常常在中段 H 漂掉幾度，這樣一格一格看很快就找得出來。
限制與注意事項
- 四種格式全都在 sRGB、每通道 8 bit 的範圍內運算。這裡不支援 Display P3、Lab、LCH、OKLCH 或 CMYK，也不會輸出
oklch()、lab()、color(display-p3 …)這類 CSS 現代色彩語法。要處理廣色域或感知均勻色彩空間，請找專門的工具。 - HSL 與 HSV 的數值都四捨五入成整數，所以來回轉一圈可能差 1。實測：
#3b82f6顯示為hsl(217, 91%, 60%)，但把這組 HSL 重新送回去會得到#3c83f6——R 與 G 各差 1。這個偏移是一次性的，第二次轉換就會停在同一個值，不會越轉越歪；但如果 HEX 是要寫進版本控制的設計 token，請以原始 HEX 為準，不要用轉一圈之後的結果。 - HEX 欄位只認 6 碼。CSS 合法的 3 碼縮寫
#abc、帶透明度的 8 碼#3b82f6ff、以及rebeccapurple這類命名色都會被判為無效。輸出恆為小寫。 - 整條流程沒有 alpha 通道。不會產生
rgba()或hsla()，透明度請自己接在後面。複製出來的 RGB 與 HSL 用的是逗號分隔的舊式語法，不是rgb(59 130 246 / 50%)這種現代空白語法（兩者所有瀏覽器都支援，只是寫法不同）。 - 灰階的 hue 在數學上沒有意義。當 R = G = B 時 H 一律回報 0，而且 S 為 0 時改 H 完全不會改變顏色——輸入的值會在下一次同步時被歸零。同理，H 輸入 360 會變回 0（是同一個顏色）。另外
#7f7f7f與#808080都顯示為hsl(0, 0%, 50%)，所以你在#7f7f7f上動任何一格 HSL，HEX 就會跳成#808080。 hsv()不是 CSS 函式，那一格是給設計工具用的，別貼進樣式表。另外 HSL 的 L 不是感知亮度：hsl(60, 100%, 50%)（黃）看起來遠比hsl(240, 100%, 50%)（藍）亮，兩者 L 卻都是 50%。這個工具不計算 WCAG 對比度，也不產生色階、互補色或調色盤。
常見問題
我把 HEX 貼進去了，其他欄位為什麼沒動？
HEX 欄位是在你離開欄位時才驗證與套用的，不是每打一個字就換算（否則打到一半的 #3b8 會被當成錯誤一直閃紅字）。貼上後按 Tab、Enter 之外的方式移開焦點，或直接點頁面其他地方，四格就會同步。
為什麼 HEX 轉成 HSL 再轉回來差了一碼？
HSL 只有 360 × 101 × 101 種整數組合，而 sRGB 有 1,677 萬色，數量對不上，所以整數化的 HSL 必然會落在最接近的那個 RGB 值上。#3b82f6 → hsl(217, 91%, 60%) → #3c83f6 就是這麼來的，肉眼看不出差別，但字串不同。要保留精確色值就從 HEX 或 RGB 欄位複製；HSL 適合用來理解與調整顏色，不適合當唯一真實來源。
支援 `#abc` 縮寫或 `#rrggbbaa` 透明度嗎？
都不支援，會顯示格式錯誤。3 碼請自己展開（#abc 就是 #aabbcc），8 碼請把後兩碼的 alpha 拿掉再貼——那兩碼是 0–255 的十六進制透明度，ff 是完全不透明、80 大約是 50%。
HSV 和設計軟體裡的 HSB 是同一個東西嗎？
是，完全相同的模型，只是 Brightness 與 Value 兩種叫法。Photoshop、Figma、Sketch 用 HSB，學術與程式庫多半寫 HSV，數值可以直接互填。要小心的是別和 HSL 搞混：同一個顏色的 HSL 與 HSV，S 與 L / V 的數字通常不一樣（#3b82f6 是 hsl(217, 91%, 60%) 但 hsv(217, 76%, 96%)），只有 H 會相同。
我在灰色上改 H，為什麼數字自己跳回 0？
因為灰色的飽和度是 0，此時 hue 不影響任何結果——hsl(200, 0%, 50%) 與 hsl(0, 0%, 50%) 都是同一個灰。工具改完顏色後會從 RGB 重新推導 HSL，而灰色的 H 定義上就是 0，所以你輸入的值被覆蓋掉了。想讓 H 有作用，先把 S 調成大於 0 的值。
可以轉 CMYK 或 OKLCH 嗎？
不行。CMYK 沒有唯一的數學轉換，同一組 CMYK 在不同紙張、油墨、印刷機上是不同顏色，需要 ICC profile 才能正確換算，任何只給你一組數字的網頁工具都是在猜。OKLCH 與 Lab 則是感知均勻色彩空間，轉換要先做 sRGB 的 gamma 解碼再進 XYZ，本工具刻意不做，避免給出看起來精確但實際上與瀏覽器渲染結果不同的數字。