顏色代碼轉換器全格式

歡迎使用 顏色代碼轉換器全格式，這是一款免費的線上工具，可將任何顏色值一次轉換為所有常見格式。貼上 HEX 代碼、RGB 三元組、HSL 或 HSV 定義、CMYK 四元組，甚至 CSS 命名顏色 —— 即可立即讀取等效值、查看即時預覽色塊、檢查 WCAG 無障礙對比度，並探索生成的互補色、三元色、類比色、色調和陰影的設計師調色板。

為什麼要使用全能顏色代碼轉換器？

大多數線上顏色轉換器僅處理單一方向（如 HEX 轉 RGB 或 RGB 轉 CMYK），當您需要全面資訊時，往往被迫鏈接使用多個工具。此轉換器在單一欄位中接受所有常見格式，自動偵測您輸入的格式，並同時返回所有五種格式及即時預覽 —— 為您在網頁、行動裝置、印刷和設計工具之間架起橋樑時節省多個步驟。

支援的輸入格式

HSL 和 HSV 顏色模型有什麼區別？

HSL 和 HSV 都通過三個直觀的通道 —— 色相 (Hue)、飽和度 (Saturation) 和第三個與亮度相關的值 —— 來描述顏色，但它們在第三個通道上有所不同。

• HSL — 色相、飽和度、亮度 (Lightness)：亮度範圍從 0%（純黑）到 50%（色相最生動的版本），再到 100%（純白）。HSL 在 CSS 中更受歡迎，因為它使顏色的變亮或變暗具有對稱性和可預測性。
• HSV / HSB — 色相、飽和度、明度 (Value/Brightness)：明度範圍從 0%（純黑）到 100%（色相最完整、最飽和的版本）。HSV 是 Photoshop、Figma 和大多數桌面設計工具中顏色選擇器背後的模型。

例如，完全飽和的紅色在 HSL 中是 hsl(0, 100%, 50%)，而在 HSV 中是 hsv(0, 100%, 100%)。這是兩種不同思維模型中的同一種顏色 —— 兩者都很有用，具體取決於您是在考慮 CSS 撰寫還是像畫家一樣思考。

為什麼我的 CMYK 值與列印軟體顯示的略有不同？

RGB 是螢幕使用的加色模型，而 CMYK 是印表機使用的減色模型。此工具執行的數學轉換是快速近似值，不包含任何 ICC 色彩設定檔、油墨覆蓋限制或紙張特定調整。對於正式列印工作，請始終依賴設計軟體的色彩管理 CMYK 設定檔（例如 US Web Coated SWOP v2 或 Coated FOGRA39）。當您僅需要一個在設計初期討論中“足夠接近”的 CMYK 四元組時，請使用此轉換器作為快速參考。

WCAG 對比度檢查如何運作？

網頁內容無障礙指南 (WCAG) 根據相對亮度定義了兩種顏色之間的對比度 —— 這是一種知覺亮度模型，綠色的權重高於紅色，紅色的權重高於藍色。對比度範圍從 1:1（完全無對比）到 21:1（純白底上的純黑）。

• AAA — 比例 ≥ 7:1，符合本文內容最嚴格的無障礙等級
• AA — 比例 ≥ 4.5:1，大多數法規中本文內容的最低要求
• AA 大字體 (AA Large) — 比例 ≥ 3:1，足以用於大字體（18pt+ 或 14pt 粗體）和圖形 UI 元素
• 失敗 (Fail) — 比例 < 3:1，請勿將此組合用於文字

該工具會計算針對純白和純黑的對比度，然後在將此色相用作背景時，突顯最佳選擇作為您的預設文字顏色。

轉換器會生成調色板嗎？

是的。每次轉換後，該工具都會從相同色相構建設計師調色板，包括：

• 互補色 — 色輪上正對面的顏色（180° 色相旋轉），適用於高對比度點綴
• 三元色 — 間隔 120° 的兩個顏色，平衡且充滿活力
• 類比色 — ±30° 的鄰近色相，適用於和諧的漸層和背景
• 色調 (Tints) — 三種較亮的變化（相同色相，較高亮度）
• 陰影 (Shades) — 三種較暗的變化（相同色相，較低亮度）

點擊調色板中的任何色塊即可立即將其載入轉換器作為新的起點 —— 非常適合快速反覆運算品牌顏色、圖標集或 UI 主題。

如何使用此工具

1. 輸入或選取顏色 — 在輸入欄位中輸入任何值（HEX、RGB、HSL、HSV、CMYK 或 CSS 顏色名稱），或點擊小色塊以開啟瀏覽器的原生顏色選擇器。
2. 轉換 — 點擊轉換按鈕。該工具會自動偵測您提供的格式並計算所有其他格式。
3. 複製所需內容 — 點擊格式值旁邊的任何一鍵複製按鈕。按鈕會短暫顯示勾選標記，以確認該值已存在於您的剪貼簿中。
4. 檢查無障礙性 — 查看針對純白和純黑的 WCAG 對比度，以確認顏色作為文字或背景是否具備可讀性。
5. 探索調色板 — 點擊設計師調色板部分的任何色塊進行轉換，在不離開頁面的情況下擴展您的設計探索。

實際應用案例

網頁開發人員

• 將 Figma 稿件中的 HEX 轉換為 hsl()，以便與 CSS 自定義屬性和現代主題系統搭配使用
• 直接從品牌 HEX 顏色生成用於半透明疊加層的 rgba() 值
• 在發佈前驗證品牌顏色在白色背景上是否符合 WCAG AA 標準

平面設計師

• 將網站上的 CSS 顏色翻譯成 CMYK 近似值，用於印刷模型設計
• 從單一起始色相構建色調階梯（色調與陰影）
• 在不離開瀏覽器的情況下找到互補或三元的點綴色

UI 與產品設計師

• 在記錄設計標記 (design tokens) 時，於 HSV（Figma 選擇器）和 HSL (CSS) 之間進行轉換對照
• 自動為任何背景識別最佳文字顏色（黑 vs 白）
• 透過結果頁面的 URL 快速書籤或分享已轉換的顏色

最佳結果提示

• 靈活使用分隔符 — 解析器接受括號內的逗號、空格或斜線，因此 rgb(79 70 229) 與 rgb(79, 70, 229) 同樣有效。
• 適當使用百分比 — rgb(31%, 27%, 90%) 是有效的；工具內部會將百分比轉換為 0–255。
• 嘗試 CSS 命名顏色 — 支援 140 多種名稱，包括 rebeccapurple 等現代新增名稱。
• 讀取通道條 — 紅/綠/藍和 CMYK 通道的視覺化分析讓您輕鬆查看哪些油墨在顏色的列印版本中佔主導地位。
• 僅將 CMYK 視為參考 — 在色彩管理的列印軟體中開啟結果，以獲取最終準確的值。

常見問題

輸入 HEX 值時需要包含 # 符號嗎？

不需要。#4f46e5 和 4f46e5 都能被接受。前導的 # 是選填的。

支援 4 位和 8 位 HEX 值（含 Alpha 通道）嗎？

解析器會接受它們，但 Alpha 通道在轉換過程中會被捨棄，因為經典形式的 RGB、HSL、HSV 和 CMYK 不包含 Alpha。此工具專注於顏色本身的部分。

我可以分享或書籤已轉換的顏色嗎？

是的。表單透過 GET 提交，因此 URL 包含您轉換的顏色。轉換後複製頁面 URL 即可分享或書籤確切的結果頁面。

為什麼有些 HEX 值顯示為大寫字母？

輸出會將 HEX 標準化為大寫（例如 #4F46E5），這是許多設計和品牌風格指南中使用的慣例。如果您偏好小寫，也可以貼回小寫形式 —— 兩者是等效的。

它在行動裝置上能正常運作嗎？

是的。介面完全採用響應式設計，表單、調色板和對比度卡片在較小螢幕上會重新排列為單欄佈局，提供舒適的觸控體驗。

其他資源

• HSL 和 HSV - 維基百科
• CMYK 顏色模型 - 維基百科
• WCAG 2.1 對比度 (最低) 要求