擴充色盤 Extended Colors

當語意色與中性色不夠用時(=顏色使用順位的順位 3),從這一頁的精選色盤挑色,不要自己去 Tailwind 全色庫亂翻。

允許的場景:彩色卡片、分類標籤、圖表系列色、行銷裝飾。 禁止的場景:任何有狀態含義的地方(成功/警告/錯誤/主要操作)—— 那是語意色的工作。

不開放的色系

這些色系和語意色、中性色重疊,永遠不用它們,避免出現兩種藍、兩種紅:

想用…	❌ 不要用	✅ 改用
藍色	`blue-*`	`primary` 系列
綠色	`green-*`	`success` 系列
紅色	`red-*`	`danger` 系列
黃色	`yellow-` / `amber-`	`warning` 系列
灰色	`gray-` / `slate-` / `zinc-*`	中性色映射(`text-regular`、`bg-fill` 等)

精選擴充色(10 色)

分類標籤、彩色卡片從這 10 個色相挑,已避開語意色的色域:

Sky 天藍

Cyan 青

Teal 藍綠

Emerald 翡翠

Lime 萊姆

Orange 橘

Rose 玫瑰

Fuchsia 桃紅

Violet 紫羅蘭

Indigo 靛藍

彩色卡片/標籤的配色公式

擴充色不會隨深色模式自動切換,所以固定用這組公式(深淺模式都配好):

底色     bg-{色}-50      深色模式 dark:bg-{色}-950
邊框     border-{色}-200  深色模式 dark:border-{色}-800
文字/圖標 text-{色}-700   深色模式 dark:text-{色}-300

實際範例(天藍卡片):

html

<div class="rounded-el border
            bg-sky-50   border-sky-200   text-sky-700
            dark:bg-sky-950 dark:border-sky-800 dark:text-sky-300
            p-4">
  卡片內容
</div>

會員標籤分析

用公式配出來的卡片,切深色模式看看 —— 一樣好看。

不要自己混搭

不要出現 bg-sky-100 text-sky-900 這種自創組合 —— 公式固定 50/200/700(深色 950/800/300),全產品才會一致。

實色使用(圖表、小圓點)

需要飽和實色時(圖表系列、狀態小圓點、頭像底色)固定用 500 階:

圖表系列色的取用順序建議:sky → violet → emerald → orange → rose → cyan → indigo → lime (相鄰的顏色對比明顯,色弱使用者也較易區分;完整的圖表規範之後另立專頁。)

快速判斷:我該用哪一層?

這個顏色代表狀態或操作?→ 語意色(primary/success/…)
這是文字、邊框、底色?→ 中性色映射(text-regular/border-lighter/bg-page)
純粹分類或裝飾?→ 本頁精選色 + 配色公式

擴充色盤 Extended Colors ​

不開放的色系 ​

精選擴充色(10 色) ​

彩色卡片/標籤的配色公式 ​