如何使用
- 輸入 HEX/RGB/HSL 任意一種格式,或用取色器選擇顏色。
- 工具自動同步輸出其他格式(含 CMYK)。
- 在 WCAG 面板查看與黑/白文字的對比度比值及 AA/AAA 結果。
- 點擊複製,把顏色值貼上到代碼或設計稿中。
核心功能
- HEX/RGB/CMYK 轉換 + WCAG 檢測:一站式完成顏色格式轉換與可訪問性檢查。
- WCAG 對比度檢測:自動計算對比度並給出 AA/AAA 通過/失敗結果。
- 印刷用 CMYK 轉換:輸出 CMYK 百分比,方便平面與印刷設計使用。
- HSL 顏色空間:支援 HSL 調整,更直觀地控制色相/飽和度/亮度。
- 系統取色器集成:使用系統顏色選擇器快速取色與預覽。
相關工具
免費圖片取色器與調色板生成器
選擇、拖曳或貼上圖片,在瀏覽器本機吸取像素顏色,複製 HEX/RGB/HSL,並提取圖片主色調色板。
Lorem Ipsum 假文生成器 (JSON/HTML) - 開發者友好
生成用於設計與前端開發的 Lorem Ipsum 假文,支援純文字、HTML <p> 標籤與 JSON 數組輸出。可變長度(段落/句子/單字),並支援中文假文。全程本機生成不上傳。
長寬比計算器與 CSS 生成 - TikTok/IG 尺寸預設
快速計算長寬比與缺失尺寸(輸入寬得高/輸入高得寬),內置 TikTok 9:16、YouTube 16:9、Instagram 4:5 等預設,並自動生成 aspect-ratio CSS 代碼。全程本機運行不上傳。
計算邏輯
- 轉換:實現 RGB↔HSL、RGB↔CMYK 的標準數學映射。
- WCAG:先計算相對亮度,再計算對比度比值。
- 相對亮度近似可寫爲:(L = 0.2126R + 0.7152G + 0.0722B)。
- 對比度爲:(\frac{L_1 + 0.05}{L_2 + 0.05}),並據此判斷 AA/AAA。
常見問題
如何檢查顏色是否符合無障礙 (WCAG) 標準?
輸入顏色後查看「WCAG」面板。工具會計算與黑/白文字的對比度並給出 AA/AAA 通過/失敗結果。
如何將 HEX 轉換爲 CMYK 用於印刷?
輸入 HEX(如 #FF0000),工具會即時輸出 CMYK 百分比(如 0, 100, 100, 0),可直接用於印刷設計。
資料安全嗎?會上傳到伺服器嗎?
不會。顏色轉換與對比度計算在瀏覽器本機完成,不上傳任何顏色資料。
是否免費?是否支援批次?
免費使用。當前以單色轉換與檢測爲主;批次場景建議逐個驗證關鍵色(主色/文字色/背景色)。
WCAG 對比度爲什麼要用 0.05?
這是 WCAG 的規範項,用於避免極端情況下除零並更貼近人眼感知的可讀性評估。