怎麼用
- 用色盤、HEX、RGB 或 HSL 任何一種方式選主色，其他欄位會同步更新。
- 選一種配色規則，下面立刻列出整組顏色；按「隨機配色」換一組。
- 有喜歡的色就按「鎖定這個顏色」，再隨機，鎖定的不會動。
- 點色值複製、下載 PNG 色票，或在最下面複製 CSS 變數貼進你的樣式檔。
- 文字要放在顏色上時，用第 3 步的對比度檢查確認讀得清楚。
六種配色規則
| 規則 | 色相相差 | 感覺與用途 |
|---|---|---|
| 互補 | 0°、180° | 對比最強、最醒目，適合按鈕與重點，用多了會刺眼 |
| 分裂互補 | 0°、150°、210° | 有對比但比互補柔和，新手比較不容易配壞 |
| 類比 | −30°、0°、+30° | 鄰近色，最和諧自然，但層次較平 |
| 三等分 | 0°、120°、240° | 色彩豐富、活潑，建議一色當主、其餘當點綴 |
| 四等分 | 0°、90°、180°、270° | 色彩最多樣，要小心控制各色的面積比例 |
| 單色明度階 | 同色相與飽和度 | 只變亮度，適合背景層次與圖表的單色漸層 |
色相偏移是在 HSL 色彩模型的色相環上計算，飽和度與亮度沿用主色，轉回 RGB 時四捨五入到整數，所以 HEX 與 RGB 是同一個顏色；HSL 取整數顯示，轉回 RGB 可能差 1 到 3，以 HEX、RGB 為準。
對比度是怎麼算的
文字對比度依 W3C《Web Content Accessibility Guidelines (WCAG) 2.2》的定義計算。先把每個色的 R、G、B（0 到 255）除以 255，再各自做轉換：值小於等於 0.04045 就除以 12.92，否則算 ((值 + 0.055) ÷ 1.055) 的 2.4 次方；然後相對亮度 L ＝ 0.2126 × R ＋ 0.7152 × G ＋ 0.0722 × B。對比度 ＝（較亮色的 L ＋ 0.05）÷（較暗色的 L ＋ 0.05），範圍 1 到 21。W3C 在定義的註記說明，2021 年 5 月前門檻寫的是 0.03928，後來更新為 0.04045，兩者在這份指引的計算上沒有實際影響。
| 等級 | 一般文字 | 大字（18 點以上，或 14 點以上粗體） |
|---|---|---|
| AA（成功準則 1.4.3） | 至少 4.5 : 1 | 至少 3 : 1 |
| AAA（成功準則 1.4.6） | 至少 7 : 1 | 至少 4.5 : 1 |
本頁判定用沒有四捨五入的原始比值，畫面上顯示的是捨去到小數第 2 位的值。黑配白是 21 : 1，兩個相同的顏色是 1 : 1。這個檢查只量文字色與背景色，不處理漸層、圖片背景或透明度。
用顏色時的幾個提醒
- 不要只靠顏色傳達意思：紅綠色弱的人分不出「紅色錯誤、綠色成功」，旁邊要加文字或圖示。
- 主色、輔色、點綴色要分比例：常見做法是大面積用中性色與主色，輔色與強調色只用在小面積。
- 螢幕與印刷不同：螢幕用 RGB，印刷用 CMYK，螢幕與印刷的顏色常有色差，要印刷請找印刷廠對色。
跟站上其他工具怎麼分
- 要在 HEX、RGB、HSL、HSV、CMYK 之間換算、從圖片取色、查 CSS 具名色：用色碼表與顏色轉換。
- 這一頁是「由一個主色產生一整組配色」，並附上每個色的對比度與匯出。
- 要做網址或文字的 QR Code，可以搭配選好的顏色用 QR Code 產生器。
限制
- 配色規則只轉色相，不會自動調整飽和度與亮度，所以有些組合（例如很亮的主色）會讓某些色偏淺或偏刺眼，請自己微調主色。
- 隨機配色是隨機選主色的色相、飽和度與亮度（飽和度約 45% 到 90%、亮度約 35% 到 65%），不保證每組都好看，多按幾次挑喜歡的。
- 對比度只依 WCAG 的亮度公式，不代表所有人都讀得清楚；實際使用請在真實畫面上確認。
常見問題
互補色、類比色、三等分是什麼意思？
這些都是在「色相環」（把色相排成 0 到 360 度的圓）上選色的方法。互補是主色與正對面（相差 180 度）的顏色，對比最強；分裂互補是主色加上對面兩側各偏 30 度的兩個色（相差 150、210 度）；類比是主色左右各 30 度的鄰近色，看起來最和諧；三等分是圓上平均分成三份（相差 120 度）；四等分是平均分成四份（相差 90 度）。本頁每一種都只轉色相，飽和度與亮度沿用你選的主色。
單色明度階是什麼？什麼時候用？
色相與飽和度不變，只把亮度（HSL 的 L）分成 5 階，從很暗到很亮，最接近主色亮度的那一階換成你選的主色本身。做按鈕、卡片、背景的深淺層次、資料圖表的單色漸層時很好用，不容易亂。
怎麼只換一部分顏色？
先按某個顏色下面的「鎖定這個顏色」，再按「隨機配色」，被鎖定的顏色不會動，其他顏色重新產生。如果鎖定的是主色那一格，新的配色就會繞著這個主色重新計算；沒鎖主色的話，主色也會一起換。換配色規則時鎖定會全部解除。
對比度 4.5:1、7:1 是怎麼來的？AA 和 AAA 差在哪？
這是 W3C 的《網頁內容無障礙指引》（WCAG）定義的算法：把文字色與背景色各算出相對亮度，再用（較亮的亮度 + 0.05）除以（較暗的亮度 + 0.05），範圍從 1:1（兩色相同）到 21:1（黑配白）。AA 要求一般文字至少 4.5:1、大字至少 3:1；AAA 要求一般文字至少 7:1、大字至少 4.5:1。大字指 18 點以上，或 14 點以上的粗體（約 24 px、18.66 px 粗體以上）。
為什麼我的 4.499 不會顯示成 4.5？
本頁判定通過與否，用的是沒有四捨五入的原始比值，顯示時再捨去（不進位）到小數第 2 位。這樣才不會出現畫面寫 4.50、判定卻是「未通過」的矛盾。
配色可以直接拿去用嗎？
色彩理論產生的是「協調的候選」，不保證適合你的品牌或內容。用在文字時，請用下方的對比度檢查確認字夠清楚；用在商標、對外設計前，也請在實際的畫面上看過。色彩在不同螢幕、印刷與色盲使用者眼中看起來都會不一樣，不要只靠顏色傳達資訊，旁邊要有文字或圖示。
我選的顏色會被記錄或上傳嗎？
不會。所有計算都在你的瀏覽器裡完成，選的顏色不會寫進網址，也沒有儲存。關掉頁面後就沒有紀錄。網站的流量統計只記你按了哪個按鈕。
規格與來源
- 相對亮度與對比度定義、AA／AAA 門檻、大字定義：W3C《Web Content Accessibility Guidelines (WCAG) 2.2》，relative luminance、contrast ratio、成功準則 1.4.3、成功準則 1.4.6。
- HSL 與 sRGB 的轉換：W3C《CSS Color Module Level 4》，HSL to RGB。
- 色相環上的互補、類比、三等分等配色規則是色彩理論的通用做法，本頁用固定的色相偏移實作（見上表）；沒有採用特定機構的標準。
- 本頁的色彩轉換與配色計算由網頁內的程式自己實作，並以另一套獨立程式（Python 標準庫的色彩轉換）逐案比對過。