為什麼會有這麼多色彩模型？
電腦螢幕、設計軟體、印刷機、人眼感知——同樣的「紅色」在不同情境用不同編碼。最常見的三組（HEX / RGB / HSL）各自對應不同問題：HEX 給網頁傳輸用，RGB 對應螢幕硬體三原色，HSL 模擬人類直覺調色（先選顏色，再調濃淡）。本工具支援三組互轉，附即時預覽與色彩挑選器，解決設計師與工程師最頻繁的轉換需求。
三大色彩模型對照
- HEX：網頁、CSS、品牌規範最常用，#RRGGBB 6 位 16 進位，例如 #C1170C（楓葉工具箱主色）。簡短易讀，團隊溝通方便。
- RGB：紅 / 綠 / 藍三通道，每通道 0-255。最接近螢幕硬體運作方式（顯示器每個 pixel 由 R G B 三 sub-pixel 組成）。CSS 寫成
rgb(193, 23, 12)或加上透明度rgba(193, 23, 12, 0.5)。 - HSL：H（色相、Hue）0-360 度、S（飽和度、Saturation）0-100%、L（亮度、Lightness）0-100%。最直觀的調色模型——選色相後，只動 L 就能產生同色系的淺 / 深變體，做主題色階首選。
常見使用情境
- 從 Figma / Sketch 取色：設計稿給 HEX，工程實作要轉 CSS rgb() 或 hsl() 才能套 alpha 透明度
- 調主題色階：HSL 把 L 從 50% 調到 90% 變淺色背景，調到 20% 變深色文字。同色相一氣呵成，不會走色
- 對比度檢查：拿到顏色後要驗 WCAG 對比度，需要 RGB 值。可搭配WCAG 對比度檢查一起用
- PPT / Excel 配色：Office 系統用 RGB 輸入，需要從 HEX 轉換
- 品牌色定義：把品牌主色記成 HEX，客戶溝通快，印刷時再轉 CMYK
調色小技巧
- 調主色階用 HSL：固定 H + S，只改 L，產出 50 / 100 / 200 / ... / 900 的階層（Tailwind 風格）
- 取互補色：HSL 的 H 加 180 度，得到色輪對面的互補色（紅↔青、綠↔洋紅、藍↔黃）
- 類比色 / 三等分色：H ±30 度做類比配色，H ±120 度做三色組合
- 暗化技巧：HSL 把 S 降低 + L 降低，比直接降 L 更自然（純黑會死沉）
常見問題
為什麼 HSL 和 HSV 不一樣？
兩者都用色相 + 飽和度，但 HSL 的 L 是「亮度」（純白 100%、純黑 0%、純色 50%），HSV 的 V 是「明度」（純色 100%、純黑 0%、無白色終點）。設計用 HSL 較常見，繪圖軟體（Photoshop）多用 HSV。
支援 alpha 透明度嗎？
本工具核心是 HEX / RGB / HSL 三模型轉換。alpha 通道在 CSS 寫成 rgba(..., 0.5) 或 #C1170C80（8 位 HEX），可直接手動加。
為什麼設計師都用 HEX？
HEX 短（6 字元 vs RGB 11+ 字元），複製貼上方便，不會像 RGB 寫錯逗號。CSS、Figma、Sketch、Tailwind 都以 HEX 為主要介面。但實際運算（mix / lighten / darken）會內部轉成 HSL 或 OKLCH。
OKLCH 是什麼？
CSS Color 4 規範裡的新色彩模型，基於人眼感知校正過，調 L 值不會走色（HSL 的老問題）。Tailwind v4 預設用 OKLCH。本工具暫時只支援 HEX / RGB / HSL，OKLCH 列為後續加強項目。