🎨 顏色小助手
顏色選擇、色碼轉換、漸層生成、配色方案與對比度檢測
HEX、RGBA、HSLA：同一個顏色的三種說法
三種格式描述的是同一個顏色，差別在「對誰方便」：
- HEX（#3399FF）：最通用的交換格式。設計稿標注、CSS、簡報工具都認得，跟別人溝通顏色時用它最不會出錯。
- RGBA（rgba(51,153,255,0.5)）：多了透明度通道。做遮罩層、陰影、毛玻璃效果時必用——alpha 從 0（全透明）到 1（不透明）。
- HSLA（hsla(210,100%,60%,1)）：以「色相／飽和度／亮度」描述，是三者中最適合調色的：要「同一個顏色深一點」只改 L 值、要「淡雅一點」只降 S 值，不必重新選色。整套設計系統的深淺變化（primary-100 到 primary-900）用 HSL 推導最省事。
本工具三種格式即時同步、一鍵複製；輸入框也接受直接貼上任一格式來反查其他兩種。
配色不用猜：色輪關係＋ 60-30-10 法則
工具會依主色自動生成三種色輪調和方案，各有明確的使用場合：
- 互補色（色輪相對 180°）：對比最強，適合「主色＋強調色」——按鈕、促銷標籤要跳出來就用它，但兩色面積要懸殊，五五開會刺眼。
- 類似色（色輪相鄰 ±30°）：最安全的和諧感，適合背景層次、同類資訊的區分；缺點是缺乏焦點，通常再補一個對比強調色。
- 三角色（等距 120°）：活潑平衡，適合插畫、兒童向、資料視覺化的類別色。
拿到方案後怎麼分配？經典的 60-30-10 法則：主導色佔 60%（背景、大區塊）、次要色 30%（卡片、導覽）、強調色 10%（按鈕、連結、重點數字）。多數「顏色好像哪裡怪」的頁面，問題不是選色而是比例——強調色一多就全都不強調了。
常見地雷：純黑 #000000 配純白文字對比過強易疲勞（正文用深灰 #333 更舒服）；紅綠對比對色覺障礙者難以區分，重要狀態別只靠顏色表達，搭配圖示或文字。
WCAG 對比度：不是加分項，是底線
對比度比率的計算基於兩色的相對亮度，範圍從 1:1（同色）到 21:1（純黑對純白）。WCAG（網頁內容無障礙指引）的門檻：
| 等級 | 正常文字 | 大文字（18pt+ 或 14pt 粗體） |
|---|---|---|
| AA（最低要求） | ≥ 4.5:1 | ≥ 3:1 |
| AAA（增強） | ≥ 7:1 | ≥ 4.5:1 |
台灣的政府網站依「網站無障礙規範」要求符合等同 WCAG 的標準，一般商業網站雖無強制，但低對比文字在手機戶外閱讀時人人都是「視力障礙者」——淺灰文字配白底（常見的 #999 on #fff 只有 2.8:1）正是最常見的不合格組合。把主色與背景色分別設成工具的主色與第二色，對比比率與 AA/AAA 判定即時顯示。
常見問題
漸層 CSS 可以直接貼到網站上用嗎？
可以。輸出的是標準 linear-gradient 語法（如 linear-gradient(to right, #3399ff, #ffffff)），貼進任何元素的 background 屬性即可，所有現代瀏覽器都支援。
怎麼快速做出「同色系深淺」的按鈕狀態色？
把主色複製成 HSLA，hover 狀態把 L（亮度）降 8–10%、active 再降一階即可，色相與飽和度不動——這是設計系統最常用的推導方式，比另外選色一致得多。
簡報、海報也適用這些配色方案嗎？
適用。色輪關係與 60-30-10 比例是媒介無關的：簡報以類似色做背景層次、互補色標重點數字，效果立竿見影。投影環境亮度低，對比度標準抓得比網頁更嚴一點更保險。
設定會被儲存嗎？
顏色運算全在瀏覽器內完成、不上傳伺服器。按「重置設定」可回到預設值。