HEX／RGB／HSL 色碼轉換器
免費即時轉換 HEX、RGB、HSL 色碼，支援三至八位 HEX、透明度、原生選色器與棋盤格預覽，一鍵複製 CSS，免安裝、本機運算並清楚標示取位精度。
請輸入有效色碼。
棋盤格背景
白色背景
深色背景
RGB與HSL接受最多12位小數，不自動截成合法範圍。預覽使用輸出的RGB CSS；無效輸入立即移除舊色彩與複製結果。
HEX、RGB與HSL，是同一個sRGB顏色的不同寫法
HEX用十六進位表示紅綠藍通道，#FF0000是紅255、綠0、藍0。RGB把三個通道寫成十進位；HSL則以色相、飽和度與明度描述。純紅可寫rgb(255 0 0 / 1)或hsl(0 100% 50% / 1)，360度與0度是同一色相。
短碼怎麼展開？八位HEX的最後兩位是透明度
#0F8展開為#00FF88；#F008則是#FF000088，最後88代表136/255，約0.533333透明度。Alpha 0表示完全透明，1表示不透明，與HSL明度或RGB通道值不同。半透明色與不同背景混合會得到不同視覺效果，所以提供三種背景一起比對。
從HSL調色，再複製到CSS
先載入純紅，切換HSL，把色相改120、飽和度100、明度50、alpha 1，結果應是#00FF00。把明度設0得到黑、100得到白；飽和度0得到灰。複製RGB CSS後可放進自己的color或background-color宣告，本頁不執行貼上的CSS。
取位不是無損：0.5與80的差異
透明度0.5轉八位HEX須把127.5取最近整數128，即80，還原約0.501960784314。RGB與HSL輸出最多12位小數，HEX每通道只能256階。切換模式沿用內部RGBA，不回讀已捨入HEX；若真的編輯HEX，則採用您指定的8-bit數值。原生選色器改RGB，保留目前有效alpha。
這裡不進行CMYK、廣色域、色彩管理或文字對比檢查。顯示器與背景會影響觀感，不能僅憑預覽宣稱符合無障礙標準或印刷色準。
接著也用得到：HTML／CSS／JS 格式化器 ↗QR Code 產生器 ↗Favicon 網站圖示產生器 ↗
簡單幾步，就完成。
- 選擇HEX、RGB或HSL來源，填寫數值或載入常見顏色。
- 即時查看三種格式及棋盤格、白底、深底的透明效果。
- 複製需要的CSS；切換來源保留內部精度，實際修改HEX時才採用該8-bit色碼。
生活裡的這些時刻，都用得到
把設計稿HEX轉成CSS RGB；以HSL調整按鈕色相與明度；檢查半透明背景在白底與深底上的差別，避免把透明度當成顏色變淡。
你可能還想知道
HEX支援哪些長度？
支援#RGB、#RGBA、#RRGGBB、#RRGGBBAA，短碼各字元重複一次；alpha在最後，例如#F008等於#FF000088。必須包含#，不接受顏色名稱。
Alpha 0.5為什麼變成80？
HEX alpha只能表達0到255的整數，0.5×255取最近整數為128，也就是80，還原約0.501960784314。RGB／HSL CSS保留十進位alpha，預覽使用RGB CSS，頁面會標示這項差異。
RGB與HSL各代表什麼？
RGB是sRGB紅綠藍通道，本工具每個通道0到255；HSL用色相0到360、飽和度與明度0到100%表示同一sRGB顏色。灰色無唯一色相，本工具顯示0度。
切換與反覆轉換會偏色嗎？
模式切換沿用未取位的內部RGBA，不回讀捨入HEX。CSS最多顯示12位小數，HEX每通道為8-bit；實際編輯取位後的HEX會採用該值，無法宣稱所有格式任意往返都零誤差。
可以用預覽保證無障礙或印刷色準嗎？
不行。這是sRGB色碼轉換，不是對比度檢查或CMYK印刷校色。不同螢幕、色彩管理與背景會影響觀感，請依使用情境另行驗證。