顏色格式轉換工具

免費線上顏色格式轉換工具，在 HEX、RGB、HSL 格式之間轉換顏色。設計師和開發者必備，支援顏色選取、歷史記錄。

立即使用顏色格式轉換工具（免費、免註冊）

在 HEX、RGB、HSL 任一欄輸入顏色或拖滑桿，另外兩種格式會立刻換算好，調低透明度還會給 8 碼 HEX、rgba() 與 hsla()；換算全在瀏覽器裡進行，按複製鈕就能貼進 CSS 或設計軟體。

三種格式怎麼寫

透明度 50% 換成 HEX 是 128／255，寫成 80；rgba() 與 hsla() 的透明度顯示到小數第二位。

HSL 用「色相、飽和度、亮度」描述顏色，想把同一個顏色調深調淺時，只要動亮度就好，比同時改 RGB 三個數字直覺。

輸入規則與換算細節

• HEX 接受 3、4、6、8 碼：#fff 會當成 #ffffff、#fff8 當成 #ffffff88；# 可打可不打，大小寫都行。打字途中不會改寫欄位，離開欄位或按 Enter 才整理成標準寫法；格式不對會出現紅字提示。
• 數值自動夾在範圍內：RGB 打超過 255 會當 255、HSL 的飽和度與亮度超過 100 會當 100，不會產生壞掉的色碼。
• HSL 自己記一份：調 HSL 時保留您打的數字，不會從四捨五入過的 RGB 反算回來，所以把飽和度拉到 0 再拉回來，色相也不會跑掉。
• HSL 取整數：RGB 換成 HSL 時色相、飽和度、亮度四捨五入到整數，同一個 HSL 再換回 RGB 可能跟原本差 1。
• 透明色的預覽：預覽方塊底下鋪了棋盤格，調低透明度時看得出透出來的程度。

取色、隨機與最近使用

• 螢幕取色：按「螢幕取色」可以吸取螢幕上任何位置的顏色，用的是瀏覽器內建的取色功能，目前只有電腦版 Chrome、Edge 支援；手機與其他瀏覽器會提示不支援。取到的顏色是不透明的。
• 隨機：一鍵產生一個隨機的不透明顏色，找配色靈感時用。
• 最近使用：按任一個複製鈕，當下的顏色就會列進「最近使用」，點一下叫回。清單記在這台瀏覽器裡（最多 12 個），重新整理或下次再來都還在；換裝置或清除瀏覽器資料就沒有了。

這個工具只處理螢幕與網頁用的 HEX、RGB、HSL，沒有印刷用的 CMYK，也不提供色彩對比度檢查。

顏色格式轉換工具功能特點

• HEX、RGB、HSL 格式互轉，支援 3 碼 HEX（#fff）
• 可調透明度，輸出 8 碼 HEX、rgba()、hsla()
• 螢幕取色（電腦版 Chrome、Edge）
• 隨機顏色生成
• 即時預覽顏色
• 一鍵複製色碼，複製過的顏色列在「最近使用」

如何使用顏色格式轉換工具？

1. 在 HEX、RGB 或 HSL 任一欄輸入顏色值（或拖滑桿）
2. 或按「螢幕取色」「隨機」選一個顏色
3. 需要半透明就調整透明度
4. 查看其他格式的轉換結果，按複製鈕帶走

顏色格式轉換工具常見問題

HEX、RGB、HSL 有什麼差別？

HEX 是十六進位色碼，常用於網頁；RGB 是紅綠藍三原色值；HSL 是色相、飽和度、亮度，更直覺地描述顏色。

什麼時候用哪種格式？

CSS 中三種都可使用。HEX 最簡潔，要透明度時可用 8 碼 HEX 或 rgba()／hsla()，HSL 適合需要調整顏色明暗時。這個工具調了透明度會三種一起給。

可以輸入 3 碼的色碼嗎？

可以。#fff 會當成 #ffffff、#f80 當成 #ff8800；也接受 8 碼（#3b82f680，最後兩碼是透明度）與 4 碼（#fff8）。# 可打可不打，大小寫都行。

有 CMYK 嗎？印刷要用哪個？

沒有。印刷用的 CMYK 要看印刷廠的色彩設定檔（紙張、油墨不同，同一個螢幕顏色換算出來的 CMYK 也不同），用公式硬換會不準，請以印刷廠提供的數值或設計軟體的色彩管理為準。這個工具處理的是螢幕與網頁用的 HEX、RGB、HSL。