| 格式 | 寫法 | 什麼時候用 |
|---|---|---|
| HEX | #1B4F72 | 網頁開發最通用的寫法，簡短、可複製。設計稿交付給前端時的預設格式 |
| RGB | rgb(27, 79, 114) | 需要用 JavaScript 動態運算顏色，或要加上透明度 rgba() 時 |
| HSL | hsl(204, 62%, 28%) | 建立配色系統的首選。調整明暗、飽和度時只需改一個數字 |
| HSV / HSB | hsv(204, 76%, 45%) | Photoshop、Figma 等設計軟體的取色盤採用此模型 |
| CMYK | cmyk(76%, 31%, 0%, 55%) | 印刷輸出。名片、DM、包裝等實體印刷品 |
這是 HEX 和 HSL 最實際的差異。假設你要為主色 #1B4F72 做出一組由淺到深的色階：
用 HEX，你得逐個試出 #2E6A94、#4A88B3、#6BA5CC……每一個都要重新調，而且很難保證色相一致。
用 HSL 就直觀得多——hsl(204, 62%, 28%) 中的三個數字分別是色相、飽和度、明度。要做色階，只改最後一個明度值即可：
hsl(204, 62%, 20%) ← 更深
hsl(204, 62%, 28%) ← 原色
hsl(204, 62%, 40%) ← 更淺
hsl(204, 62%, 60%) ← 再更淺色相與飽和度不變，整組顏色自然就是協調的。這也是 Tailwind CSS、Material Design 等設計系統都以 HSL 思維建立色階的原因。本頁的「明暗色階」就是照這個方式產生的。
螢幕用 RGB 是加法混色：三色光疊加愈多愈亮，全開是白色。印刷用 CMYK 是減法混色：油墨疊加愈多愈暗，全滿趨近黑色。兩者的色域（能表現的顏色範圍）並不重疊。
RGB 能顯示許多鮮豔的螢光色，是 CMYK 油墨印不出來的——最典型的是飽和度高的青色與螢光綠，印出來一定會偏暗、偏濁。
因此任何線上工具的 RGB→CMYK 轉換都只是數學上的近似，沒有考慮紙張、油墨、印刷機的特性。正式印刷請務必以印刷廠提供的色票（如 Pantone 色卡）或打樣為準，不要直接拿螢幕上看到的顏色下印。
WCAG（Web Content Accessibility Guidelines）是 W3C 制定的網頁無障礙標準。其中的對比度規範，是為了確保視力較弱、色覺異常，或單純在陽光下看手機的使用者能讀得清楚。
對比度以比值表示，從 1:1（前景背景完全相同，看不見）到 21:1（純黑配純白，最大對比）。標準要求如下：
| 等級 | 小字 | 大字 | 適用 |
|---|---|---|---|
| AA（一般要求） | 4.5:1 | 3:1 | 多數商業網站的目標，也是政府採購常見的門檻 |
| AAA（加強要求） | 7:1 | 4.5:1 | 公共服務、醫療、金融等對可及性要求高的場合 |
「大字」的定義是 18pt（約 24px）以上，或 14pt（約 18.66px）以上的粗體。
#999999 配白底只有 2.85:1，連 AA 都不到。這是實務上最常見的違規。順帶一提，對比度只是無障礙的一部分。不要只用顏色傳達資訊——例如表單錯誤只把邊框變紅，色覺異常的使用者可能看不出來，應同時加上文字說明或圖示。
HEX 除了常見的 6 位數，還可以寫成 8 位數，最後兩位表示透明度（alpha）：
#1B4F72FF 完全不透明（等同 #1B4F72）
#1B4F72CC 約 80% 不透明
#1B4F7280 約 50% 不透明
#1B4F7200 完全透明這個寫法所有現代瀏覽器都支援，本工具也能正確解析。要注意的是對比度計算不考慮透明度——半透明的顏色最終呈現的效果取決於它背後疊了什麼，需要先算出實際混合後的顏色再檢測。
本工具完全在你的瀏覽器中執行，不需要也不會傳送任何資料到伺服器。詳見隱私權政策。