HEX、RGB、HSL 色碼互相轉換，選一個顏色，三種格式同步更新，一鍵複製。
HEX、RGB、HSL 描述的是同一個顏色，差別只在「用什麼座標系統」來記錄。RGB 是最直接的方式，用紅（R）、綠（G）、藍（B）三個 0–255 的整數，代表螢幕上這三種色光各自的強度混合出來的結果——這是螢幕顯示的物理基礎，所有數位顏色最終都會被轉成 RGB 才能點亮螢幕上的像素。HEX 只是把 RGB 的三個數字換成十六進位表示，方便寫進程式碼或設計檔案裡：一組 6 碼的 HEX 值，前兩碼是 R、中間兩碼是 G、後兩碼是 B，本質上跟 RGB 是同一組資料，只是進位制不同。HSL 則是換了一種更貼近人類直覺的思考方式，用色相 H（Hue，0–360 度，決定是紅色還是藍色還是綠色）、飽和度 S（Saturation，顏色的鮮豔程度）、明度 L（Lightness，顏色的明暗程度）三個維度來描述，而不是「紅光加多少、綠光加多少」。
從 RGB 換成 HSL，程式要先把 R、G、B 除以 255 換算成 0–1 的比例，取三者的最大值與最小值，明度 L 就是最大值與最小值的平均；飽和度 S 由最大值與最小值的差距決定（差距越大代表越鮮豔）；色相 H 則要看是哪個顏色分量最大，再用一個分段公式算出角度——這也是本工具 rgbToHsl() 函式實際在做的事。反過來從 HSL 換回 RGB，則要用色相角度配合一個叫 hue2rgb 的輔助函式，分段計算出三個顏色分量各自該混多少。這一整套換算是十六世紀色彩理論沒有、但電腦圖學裡很成熟的數學模型，重點只有一個：三種格式互相之間都可以「無損」精確互轉，沒有哪一種比較準，純粹是給人看的方便程度不同。
寫網頁 CSS 或跟工程師溝通色碼時，HEX 最常見，因為短、好複製貼上，例如 #4F46E5 就是一組完整的顏色資訊，設計軟體（Figma、Photoshop）的色票欄位預設也常是 HEX。需要對顏色做「微調」時，HSL 反而更好用：想要同一色系但更亮或更暗的版本，只要固定 H 和 S，改 L 就好，不需要重新調三個 RGB 數值去湊出視覺上「同色系但變亮」的效果；同樣地，想要飽和度低一點的莫蘭迪色系，直接降 S 就好。RGB 則常見於程式裡需要對顏色做數值運算的場合，例如做透明度疊加、色彩漸層插值，因為它是最原始的線性數值。
以工具預設的 #4F46E5（一種靛藍色）為例：拆成 HEX 三組兩碼是 4F、46、E5，換算成十進位就是 R=79、G=70、B=229，也就是 rgb(79, 70, 229)。再往下換算成 HSL：三個比例值中 B 最大、G 最小，算出色相落在藍紫色區間，結果是 hsl(244, 75%, 59%)——色相 244 度落在藍到紫之間、飽和度 75% 偏鮮豔、明度 59% 屬於中等亮度，跟肉眼看到的靛藍色是吻合的。你可以直接在上面的工具輸入 #4F46E5 驗證這個結果。
正常情況下不會。RGB、HEX、HSL 之間是精確的數學轉換公式，不是估算，同一個顏色來回轉換多次結果都會一致。唯一可能出現的小誤差是四捨五入：例如 HSL 的角度或百分比在轉回 RGB 時會被四捨五入成整數，理論上有極小機率造成 RGB 值正負 1 的偏差，但肉眼完全看不出差別。
這個工具的 HEX 檢查邏輯只接受標準的 3 碼或 6 碼十六進位字元（可以帶或不帶 # 開頭），如果貼上的內容多了空格、換行、或是像 rgba() 這種其他格式的字串，就不會觸發更新。把貼上的內容清理成純粹的色碼（例如 4F46E5 或 #4F46E5）就能正常運作。
不會。所有換算都是純 JavaScript 在你的瀏覽器裡即時計算完成，頁面本身沒有任何把顏色資料送出去的程式碼，重新整理頁面資料就會消失，適合處理內部設計稿或還沒公開的品牌色彩。
是相近但要小心混用的概念。HSL 的 S 和 L 是電腦圖學裡標準化的數學定義，跟色彩學或印刷業講的 HSV、Lab 色彩空間裡的彩度、明度算法略有不同，數值不能直接互換使用，但作為「調整同色系深淺、鮮豔度」的直覺工具已經非常夠用。
3 碼縮寫是把每個顏色分量的兩碼重複一次展開成 6 碼，例如 #4F6 會被工具展開成 #44FF66，而不是 #4F0F60。這是 CSS 規範的簡寫規則，只能表示每個色版兩碼相同的顏色（總共 16×16×16 種），沒辦法用 3 碼縮寫表示所有 6 碼能表示的顏色。