無需上傳, 100% 本機處理, 無需帳戶

顏色轉換器

在 HEX、RGB、HSL、HSV 和 CMYK 之間轉換。即時預覽。WCAG 對比度檢查器用於無障礙設計。不會有任何內容離開你的瀏覽器。

顏色轉換器 的運作方式

顏色轉換器在你輸入時即時在 HEX、RGB、HSL、HSV 和 CMYK 格式之間轉換任何顏色。它也可以對你選擇的任意兩種顏色進行 WCAG 對比度檢查,顯示對比率,以及正常文字、大型文字和 UI 元件的 AA/AAA 通過/未通過結果。所有計算都在瀏覽器中進行,沒有任何資料被傳送到任何地方;你輸入的任何內容都不會離開你的裝置。

了解同一顏色在不同色彩模型中的表現,對設計交接非常有用。設計師可能將品牌顏色指定為 HEX #1A4F8C;CSS 開發者需要用於主題的 HSL 等效值;印刷團隊需要 CMYK 分解。這個工具同時在所有方向進行轉換,你不必分別開啟多個轉換器。

顏色轉換器 的分步使用說明

  1. 輸入 HEX 值、點擊顏色色塊,或在相應欄位中輸入 RGB、HSL、HSV 或 CMYK 值。
  2. 所有其他格式的表示立即更新,顯示等效顏色。
  3. 若要進行對比度檢查,請使用兩個顏色選擇器分別選擇前景色和背景色。
  4. 閱讀 WCAG 對比率和 AA 及 AAA 合規等級的通過/未通過標記。
  5. 使用每個欄位旁的複製圖示複製任何顏色值。

常見使用情境

  • UI 設計師將品牌 HEX 代碼轉換為 HSL,為主題系統撰寫 CSS 自訂屬性。
  • 網頁開發者在發佈元件前,檢查文字顏色和背景之間的對比率,確認符合 WCAG AA 要求。
  • 印刷設計師收到網路 HEX 顏色,需要 CMYK 等效值以在印刷手冊中匹配。
  • 開發者需要設計 token 的 RGB 分解,以將各個通道值傳遞給 canvas 繪圖函式。

常見問題

工具支援 Alpha(透明度)值嗎?

目前的轉換器適用於完全不透明的顏色(alpha = 1)。HEXA(8 位 HEX)和 RGBA 尚未在範圍內。對於不透明度,請在你的 CSS 中使用 rgba() 或 oklch() 語法單獨設定 alpha 通道。

我輸入的顏色會被儲存或傳送到任何地方嗎?

不會。顏色轉換是純算術(通道重新映射和範圍縮放),完全在瀏覽器的 JavaScript 引擎中執行。你在這裡輸入的任何內容都不會到達任何伺服器或外部服務。

對比度檢查器支援哪些 WCAG 對比度等級?

工具根據 WCAG 2.1 成功標準進行報告:AA 要求正常文字(18pt 以下或 14pt 粗體以下)的最小對比率為 4.5:1,大型文字和 UI 元件為 3:1。AAA 要求正常文字為 7:1,大型文字為 4.5:1。

為什麼此工具的 CMYK 值與專業設計軟體不同?

這個工具執行的 RGB 到 CMYK 轉換是沒有色彩設定檔的數學公式。專業設計應用程式套用考慮油墨網點增益和基材特性的 ICC 色彩設定檔。這裡的 CMYK 值有助於近似計算;對於生產印刷,請始終在專業軟體中套用你的印刷機設定檔。

我可以在這裡轉換「cornflowerblue」之類的 CSS 顏色名稱嗎?

CSS 具名顏色無法直接輸入到轉換器欄位中。要轉換具名顏色,請先在 CSS 參考資料中找到其 HEX 值(cornflowerblue 是 #6495ED),然後將該 HEX 貼入 HEX 欄位以查看所有其他格式。

工具在頁面載入後可以離線使用嗎?

可以。顏色轉換是沒有外部依賴性的算術。一旦頁面在瀏覽器快取中,你就可以在沒有網路連線的情況下開啟它,所有轉換都將正常運作。