色碼轉換與調色盤
即時轉換 HEX、RGB、HSL、HSV 及 CMYK。
包含調色盤生成器及對比度檢查。
色彩挑選器
色碼
/* CSS Variables */ --color-primary: #3b82f6; --color-primary-rgb: 59, 130, 246; --color-primary-hsl: 217, 90%, 60%;
調色盤
對比度檢查
白色文字 Aa
Ratio: -
黑色文字 Aa
Ratio: -
已儲存顏色
使用 ⭐ 儲存顏色 (最多 20 個)
關於轉換器
色碼轉換與調色盤生成工具是一個免費的線上工具，可即時在五種主要色彩格式（HEX、RGB、HSL、HSV 及 CMYK）之間進行轉換。它具備直觀的色彩挑選器，並能根據您選擇的顏色自動生成互補色及類似色等調色盤。
它還內建了網頁無障礙性重要標準的 WCAG 對比度檢查器，讓您能立即判斷在選擇的背景顏色上，使用白色或黑色文字是否合適。生成的色碼只需點擊一下即可複製，且可直接輸出為 CSS 變數，大幅提升網頁設計師和前端工程師的開發效率。
使用方法
選擇或輸入顏色
點擊色彩挑選器的漸層區域選擇顏色，或調整色相與透明度滑桿。您也可以直接在 HEX 或 RGB 欄位中輸入色碼。
複製轉換後的色碼
無論您透過哪種方式變更顏色，所有的色彩格式（HEX、RGB、HSL、HSV、CMYK）都會即時更新。點擊各項目旁的「複製」按鈕即可存入剪貼簿。您也可以一次複製所有的 CSS 變數。
檢查調色盤與對比度
在「調色盤」區塊查看互補色及單色等配色變化。在「對比度檢查」區段中，系統會自動判定在所選背景色上白/黑文字的易讀性。
色彩詞彙表
- HEX (十六進位色碼)
- 網頁設計中最常用的色彩表示格式。以 "#RRGGBB" 等 6 位字元（或 "#RGB" 等 3 位字元）的格式表示，使用十六進位 (00-FF) 來指定紅 (R)、綠 (G) 和藍 (B) 的強度。如果包含透明度，則表示為 "#RRGGBBAA" 等 8 位字元，在 CSS 和 HTML 中廣泛支援。
- RGB / RGBA
- 基於光的三原色（紅、綠、藍）的加法混色模型。基於螢幕的發色原理，每種顏色以 0 到 255 的數值表示。在 CSS 中寫為 "rgb(255, 0, 0)"，使用 "rgba" 時可在最後加上 0.0 到 1.0 的 Alpha 值（透明度）。
- HSL
- 使用色相 (Hue)、飽和度 (Saturation) 和亮度 (Lightness) 三個屬性來表示顏色的模型。由於易於直覺地調整如「改變色調」或「使其變暗」，非常適合使用 CSS（hsl 函式）建構設計系統與動態更改主題。
- CMYK
- 使用青 (Cyan)、洋紅 (Magenta)、黃 (Yellow) 和黑 (Key) 四種顏色的減法混色模型。這主要用於印刷業的墨水格式，瀏覽器上的 CMYK 值為近似理論值，因此在實際印刷時需透過色彩設定檔進行調整。
- 對比度 (WCAG Contrast Ratio)
- 背景顏色與文字顏色之間相對亮度的比例，由網頁無障礙指南所定義。為了確保所有使用者都能閱讀文字，一般文字建議比例為「4.5:1 (AA 級別)」以上，大型文字則建議「3:1」以上。
常見問題
- Q.列印時 CMYK 轉換結果準確嗎？
- 在瀏覽器上計算的 CMYK 值屬於近似的理論值。實際列印出的顏色會因印表機的 ICC 設定檔和墨水特性而異。若需要準確的 CMYK 數據用於印刷，請透過 Adobe Illustrator 或 Photoshop 等色彩管理軟體進行轉換和確認。
- Q.這個工具支援透明度 (Alpha) 轉換嗎？
- 是的。透過調整色彩挑選器中的「透明度 (Alpha)」滑桿，或是直接在色碼中輸入透明度值，將會正確輸出包含透明度的 HEX (#RRGGBBAA)、RGBA 及 HSLA 程式碼。非常適合現代需要透明度處理的 Web UI 實作。
- Q.「複製 CSS 變數」功能是什麼？
- 此功能可以將所選顏色以 CSS 自訂屬性 (CSS Variables) 的格式輸出。它會生成類似 --color-primary: #3b82f6; 的格式，以及 RGB 和 HSL 的逗號分隔值，讓您非常輕鬆地設定 Tailwind CSS 配置或動態主題。
- Q.我輸入的顏色資料會儲存在伺服器上嗎？
- 不會。此工具完全在客戶端（您的瀏覽器內）運行。您的色碼或生成的調色盤絕對不會傳輸或儲存到外部伺服器上。「已儲存顏色」功能也是將顏色嚴格保存在您瀏覽器的本地儲存中，確保您的隱私安全。
使用場景
網頁設計與切版開發
將設計軟體 (如 Figma 或 XD) 輸出的 HEX 色碼，快速轉換成 RGB 或 HSL 格式用於開發中。並透過複製 CSS 變數簡化現代主題開發流程。
提升無障礙性
在開發時即時檢查網站的背景色與文字色組合是否符合 WCAG 對比度標準 (AA/AAA)，打造易讀性更高的使用者介面。
配色方案檢討
根據企業品牌色彩，自動產生互補色或類似色等相關調色盤。有助於構思整體簡報與平面設計的協調配色。
供印刷使用的轉換參考
將網頁使用的顏色轉換為 CMYK 值，作為製作傳單及名片等印刷品時的近似參考值。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.