色碼轉換與調色盤
即時轉換 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 值，作為製作傳單及名片等印刷品時的近似參考值。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.