顏色轉換器
HEX、RGB、HSL、LAB 四大格式互轉 + WCAG 對比檢查 + 智慧配色
顏色選擇器
手動輸入（RGB／HSL／LAB）
°
%
%
L*、a*、b* 三軸皆即時生效——試著單獨改 a* 或 b*，HEX／RGB 會跟著變。
HSL 調整滑桿
格式轉換
#667EEA
rgb(102, 126, 234)
hsl(229, 76%, 66%)
lab(55.77, 22.50, -57.43)
配色方案生成
根據色彩理論自動生成和諧配色，每種都附實務使用建議。
WCAG 2.1 對比度檢查
檢查文字與背景的對比度是否符合無障礙標準。
範例文字 Sample Text
小字體文字 (< 18pt)
3.66:1
僅適合大字體／粗體標題（18pt 以上）——避免用於小字。
AA - 一般文字
未通過
AA - 大字體
通過
AAA - 一般文字
未通過
AAA - 大字體
未通過
最近使用的顏色
顏色分析圖表
#667EEA
紅色 (R): 102 (40%)
綠色 (G): 126 (49%)
藍色 (B): 234 (92%)
關於顏色轉換器
這是一款專業的顏色格式轉換工具，支援 HEX、RGB、HSL、LAB 四種格式互轉。所有公式皆經 W3C CSS Color Module Level 3/4 與 CIE L*a*b* 標準驗證。內建 WCAG 2.1 對比度檢查，協助設計師與開發者打造無障礙介面，並提供色彩理論配色方案生成，快速產出和諧組合。
如何使用
- 點擊預覽色塊選色，或直接輸入 HEX/RGB/HSL/LAB 數值。
- 使用 HSL 滑桿微調色相、飽和度、亮度。
- 查看轉換後的 HEX/RGB/HSL/LAB，逐一複製或一次複製全部格式。
- 選擇配色方案類型，並將整組複製為 CSS 變數。
- 用對比度檢查工具確認文字／背景組合符合 WCAG 2.1 AA/AAA。
- 點擊歷史紀錄色塊立即取回最近使用的顏色。
核心功能
- HEX ↔ RGB ↔ HSL ↔ LAB 精準互轉，經 W3C／CIE 驗證（誤差 < 1%）
- WCAG 2.1 對比度計算，AA／AAA 通過徽章＋白話結論
- 5 種色彩理論配色方案，各附實務使用建議
- 一鍵「複製全部格式」與「複製整組配色為 CSS 變數」
- 每個色塊雙動作：複製 HEX 或設為當前色，避免誤觸覆蓋
- 顏色歷史紀錄（最近 10 個）與可分享網址
應用場景
• 網頁設計：快速轉換 CSS 顏色格式，確保視覺一致性
• UI/UX 設計：檢查介面對比度，符合無障礙設計規範
• 品牌設計：生成和諧的品牌配色方案
• 前端開發：取得精準的 RGB/HSL/LAB 數值用於程式設計
• 平面設計：建立協調的色彩組合
• 無障礙測試：驗證文字對比度是否符合 WCAG 2.1
專業技巧
- 色相 (Hue)：決定顏色種類。0°=紅色、120°=綠色、240°=藍色。
- 飽和度 (Saturation)：控制鮮豔度。0% 為灰階，100% 為純色。
- 亮度 (Lightness)：50% 為標準亮度，0% 為黑色，100% 為白色。
- WCAG AA 標準：一般文字需 4.5:1，大字體需 3:1。
- 互補色配色適合強對比設計，如 CTA 按鈕。
- 類似色配色適合柔和風格，如背景漸層。
