顏色代碼轉換器
免費線上顏色轉換工具，可在HEX、RGB、HSL、OKLCH色彩代碼間即時互轉，並計算兩種顏色的WCAG對比度以檢查無障礙合規性。 適用於開發與資料處理時需要在 CSV、JSON、色彩、時間等不同格式之間轉換的情況，全部在瀏覽器本機完成，輸入資料不會上傳伺服器，無需安裝或註冊即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
HEX
#3b82f6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)OKLCH
oklch(0.623 0.188 259.8)HSL 調整
對比度（WCAG）
比較顏色：
샘플 텍스트
對比度： 3.68:1
WCAG: AA Large
嵌入
最後更新：2026 · 免費線上工具
什麼是 顏色代碼轉換器？
免費線上顏色轉換工具，可在HEX、RGB、HSL、OKLCH色彩代碼間即時互轉，並計算兩種顏色的WCAG對比度以檢查無障礙合規性。 適用於開發與資料處理時需要在 CSV、JSON、色彩、時間等不同格式之間轉換的情況，全部在瀏覽器本機完成，輸入資料不會上傳伺服器，無需安裝或註冊即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
使用方法
- 1輸入顏色— 使用取色器或文字輸入顏色。支援HEX、rgb()、hsl()格式。
- 2查看格式— HEX、RGB、HSL、OKLCH格式同時顯示。
- 3複製值— 點擊每種格式的複製按鈕複製CSS值。
- 4檢查對比度— 設定對比顏色以檢查WCAG對比度。
相關工具
CSS 漸層產生器免費線上視覺化工具，設計linear、radial、conic漸層，調整顏色停止點和角度，一鍵複製網頁背景的CSS程式碼。 適合在測試與開發中即時產生所需數值，所有產生過程都在瀏覽器本機執行，資料不會上傳伺服器，無需安裝或註冊即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
CSS 盒子陰影產生器免費線上CSS box-shadow產生器，可調節偏移、模糊、擴散、顏色和內陰影inset並即時預覽陰影，產生可複製的box-shadow CSS代碼。 適合在測試與開發中即時產生所需數值，所有產生過程都在瀏覽器本機執行，資料不會上傳伺服器，無需安裝或註冊即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
CSS 單位參考免費線上CSS單位參考，按類別整理px、em、rem、%、vw、vh、vmin、vmax、ch等單位的用途與用法，並說明絕對單位與相對單位的換算關係和常見取值場景。 可在編碼時於一處快速查閱程式碼、符號、快速鍵等參考資訊，在瀏覽器中即時搜尋與複製，無需註冊或安裝即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
PX-REM 轉換器以可自訂的根字級為基準在CSS的px和rem單位間雙向轉換，支援小數值，並提供可複製的參考表和CSS程式碼片段的免費線上工具 適用於開發與資料處理時需要在 CSV、JSON、色彩、時間等不同格式之間轉換的情況，全部在瀏覽器本機完成，輸入資料不會上傳伺服器，無需安裝或註冊即可免費使用。 結果可一鍵複製，整個過程簡單快捷，無需下載任何軟體，在手機和電腦上都能隨時流暢使用。
常見問題
OKLCH是Oklab色彩空間的圓柱形表示，是感知最均勻的色彩空間。CSS Color Level 4已支援。
衡量文字與背景顏色之間的亮度差異。AA標準要求至少4.5:1，AAA標準要求7:1。
目前僅支援不透明顏色（RGB、6位HEX）。RGBA和HSLA將在未來版本中新增。
可以。每種格式的輸出值可以直接貼到CSS中使用。
不會。所有顏色轉換都在瀏覽器中完成。