工具頁摘要
HEX/RGB/HSL/HSV/CMYK 五種色彩格式雙向轉換，內建 WCAG 對比度與六格 hue 分區矩陣；瀏覽器端執行。
分類：開發工具 / Developer。正式路徑：/tools/developer/color-converter。狀態：GOLD。本頁提供可直接閱讀的工具用途、輸入情境、結果解讀、FAQ、信任聲明與相關資源摘要，協助讀者在使用前了解適用情境與限制。
本工具提供一般資訊與估算輔助，計算結果會受輸入值、假設條件與資料更新影響。財務、健康或法律相關結果不應視為專業建議；做出重大決策前，請依實際情況查核來源並諮詢合格專業人士。
中文摘要：色彩格式轉換器 是 Formula Universe 收錄於 開發工具 / Developer 分類的工具頁，包含工具用途、輸入指引、結果解讀、FAQ、資料來源、限制說明與責任參考。
最後更新：2026年6月23日
本頁面由 Formula Universe 編輯團隊審核並維護。我們定期更新工具內容、驗證計算邏輯和資料來源準確性，以確保提供讀者最新、最可靠的資訊。
開發工具 · 色彩格式 · 黃金模板
HEX/RGB/HSL/HSV/CMYK 五格雙向轉換，並提供 hue 六格分區與 WCAG 對比度判讀
本工具在瀏覽器端執行 HEX、RGB、HSL、HSV、CMYK 五種色彩空間的雙向轉換，計算亮度與對比度（WCAG 2.1 公式），並把當前 hue 放進六格分區判讀矩陣；不上傳任何資料，適合處理品牌色、設計 token 與機敏視覺資產。
範例 → 計算機
先用範例理解色彩格式互換，再貼上自己的品牌色或設計 token。
色彩轉換結果
124,58,237
0–255
262°,83%,58%
0–360°
48,76,0,7
0–100%
HEX #7c3aed RGB(124, 58, 237) HSL(262, 83%, 58%) HSV(262, 76%, 93%) CMYK(48, 76, 0, 7) WCAG on white: 5.70:1 · on black: 3.69:1
結果解讀
L7 固定六格，把目前色彩的 hue 放進常見品牌與功能用色區段；這是設計策略參考，不是品牌規範或無障礙合規建議。
紅、紅橘色系，hue 在 0–30° 或 330–360°；視覺刺激度最高，常用於警示、品牌主視覺、CTA 按鈕。
橘、黃、暖琥珀色系，hue 30–60°；溫暖友善，常用於餐飲、能量飲品、活力品牌。需注意純黃在白底對比度低。
黃綠、純綠、青綠色系，hue 60–180°；自然、健康、財務正向訊號；對眼睛最友善的中性 hue 區段。
青、海洋、湖水色系，hue 180–210°；科技、清涼、信任感；常用於 SaaS、雲端、健康保險品牌主色。
純藍、靛藍、紫藍色系，hue 210–270°；專業、權威、穩定；金融、企業、政府使用率最高的 hue 區段。
紫、品紅、桃紅色系，hue 270–330°；高端、創意、奢華；美妝、精品、文創產業常見；中性灰本身位於此區段外。
情緒與轉換層
L9 會連動目前計算結果，顯示 hue、亮度與對比度，協助判斷此色適合做主色、輔色或僅作裝飾用色。
結構洞察卡
動力卡
儲存 / 分享
重新貼上 HEX 或拉動 RGB 滑桿時自動重算所有格式與 WCAG 對比度，協助比較不同色彩的可讀性與品牌一致性。
下一步行動
決策路徑
輸入 HEX/RGB
格式互換
Hue 判讀
設計決策
知識
色彩格式是描述顏色的數學模型：HEX 用 6 位十六進位（#RRGGBB）表示 sRGB 三通道；RGB 用 0–255 整數；HSL/HSV 用色相 0–360°、飽和度 0–100%、亮度/明度 0–100%；CMYK 用 0–100% 四色油墨比例（簡化版）。
RGB→HSL：取 max/min 算亮度 L=(max+min)/2、飽和度 S 與色相 H。WCAG 對比度 = (L1+0.05)/(L2+0.05)，L 為相對亮度（sRGB→linear→0.2126R+0.7152G+0.0722B）；AA 級正文需 ≥ 4.5、大字 ≥ 3、AAA 級正文需 ≥ 7。
本工具用 sRGB 色彩空間（IEC 61966-2-1），不支援 P3、Adobe RGB 等廣色域；CMYK 採用簡化公式（C=1-R, M=1-G, Y=1-B 後扣 K），無 ICC profile，不可作為印刷打樣依據；HSL/HSV 只能近似人眼感知，色彩感知級需 LAB / OKLCH。
對比度數值（如 4.5、7）是無障礙合規硬指標，不是設計建議。Hue 分區是大眾化的色彩心理參考，實際品牌定位需配合飽和度、亮度、文化脈絡綜合判斷。CMYK 數值僅供概念換算，印刷請以實體打樣或 Pantone 色卡為準。
主要場景：design system token 同步、品牌色 cross-platform 驗證、無障礙對比度檢查、印刷預估、CSS variable 產生、Tailwind config 對應、Figma / Sketch 色彩匯出。應與 ICC profile 工具、Pantone 色卡、a11y audit 工具一起評估。
若輸入 #7c3aed（Tailwind violet-600），則 RGB=(124,58,237)、HSL=(259°,85%,58%)、HSV=(259°,76%,93%)、CMYK=(48,76,0,7)。Hue 259° 落在「紫色系」band；白底 WCAG 對比度 ≈ 5.6，符合 AA 級正文；黑底 ≈ 3.7，僅符合 AA 大字。
常見問題
HEX 色碼必須是 3 或 6 位十六進位字元（0–9 / A–F），可選前綴 #；常見錯誤：(1) 含非 0–9 / A–F 字元（例如 G/H/I）；(2) 位數不對（4 位、5 位、7 位都不合法）；(3) 包含空白或標點。本工具會自動補 #，但語法錯誤仍會顯示 Invalid。
對比度數值範圍 1:1（同色不可讀）到 21:1（黑白最高）；WCAG AA 級正文需 ≥ 4.5、大字（18pt 或粗 14pt）需 ≥ 3；AAA 級分別為 7 與 4.5。本工具同時計算白底與黑底的對比度，便於選擇文字配色。
不會。本工具完全在瀏覽器端用純數學公式轉換 sRGB 色彩空間，頁面關閉後資料即消失；適合處理未公開的品牌色、機敏 design token 或商業敏感配色。
本工具使用簡化的 CMYK 公式（K = 1-max(R,G,B)、CMY = (1-RGB-K)/(1-K)），無 ICC profile 校正；實際印刷需考慮紙張白度、油墨配方、印刷機壓力、網點擴散等變數，請以 Adobe Acrobat Pro 軟打樣或 Pantone 實體色卡為準。
HSL 的 L（Lightness）= 0% 是黑、50% 是純色、100% 是白；HSV 的 V（Value）= 0% 是黑、100% 是「該色相飽和狀態」（不一定是白）。設計師調色用 HSV 比較直覺（推到底就是純色），CSS 變數系統用 HSL 比較好做 dark mode（同 hue 不同 L）。
OKLCH 是感知均勻色彩空間（CSS Color Module Level 4），同樣的 L 在不同 hue 看起來亮度真的一樣，HSL 不是；OKLCH 是 2023 年起新一代設計系統的趨勢（Tailwind CSS、Radix Colors 都已支援）。本工具目前提供 HSL 為主，OKLCH 在專業版開放。
推薦工具
* 聯盟連結,購買後我們可能獲得佣金。
解鎖 OKLCH / LAB / P3 廣色域轉換、ICC profile 載入、批次 design token export（CSS / Tailwind / Figma）、色盲模擬（Protanopia / Deuteranopia / Tritanopia）、自動配色（互補 / 三角 / 類比）。
信任聲明 · 相關工具 · 參考資料
本工具僅在瀏覽器端執行 sRGB 色彩空間數值轉換，貼上的色碼不會送到伺服器；不取代 ICC profile 校色、Pantone 印刷打樣或專業 a11y 審計工具。色彩轉換是數學換算，不是色彩管理。
Regex 測試器 · URL 編碼器 · JSON 格式化器 · Base64 編碼器
W3C CSS Color Module Level 4 (2022) §6 sRGB / §10 OKLCH; IEC 61966-2-1 (1999) sRGB Default RGB Colour Space; W3C WCAG 2.1 §1.4.3 Contrast (Minimum) AA / §1.4.6 Contrast (Enhanced) AAA; Mozilla MDN Web Docs — <color> CSS data type; Harvard CS50 Web Programming — CSS color spaces module。