TailwindCSS 色彩系統：50–950 色階、OKLCH 與透明度速記 | TailwindCSS 完整教學

版面搭好了，是時候替它上色。TailwindCSS 內建一套精心設計的調色盤：22 種色相、每種從 50 到 950 共 11 個明度色階，透過 text-*／bg-*／border-*／ring-* 統一套用，還有一顆斜線就搞定的透明度速記（bg-blue-500/50）。這一篇會帶你認識整套色階系統、v4 預設改用的 OKLCH 廣色域、如何用 @theme 打造品牌色，以及對比度與透明度的最佳實踐。這是 TailwindCSS 完整教學 系列的第十五篇，也是視覺樣式章（TW-4）的開場。

前言

前面十四篇我們把「排版」講透了——Flexbox、Grid、定位、間距、尺寸，一路到上一篇 《常見版面模式》 把它們組裝成聖杯佈局、Sticky Footer、卡片網格等真實骨架。但一個只有黑白線框的頁面，再工整也稱不上「作品」。從這一篇開始，我們翻開 視覺樣式章（TW-4），替版面注入靈魂，而第一件事就是上色。

用一個生活化的類比來理解 Tailwind 的色彩系統：想像你走進一家專業油漆店。 業餘玩家買顏料是「隨手擠一坨紅色」，每次擠出來的濃淡都不一樣；專業設計則是拿著標準色卡，同一個藍色系從最淺到最深標好編號，指名「藍色 500」大家拿到的都是同一個顏色。Tailwind 的調色盤正是這張色卡：blue 是色相（哪一種顏色），500 是明度色階（多淺或多深），blue-500 就是色卡上一格精確的顏色。你不用再糾結 #3b82f6 這種難記的十六進位碼，只要記住「色相 + 色階」兩個維度，整套視覺就有了一致的基準。

而 TailwindCSS v4 讓這張色卡更上一層樓——它把所有預設顏色從舊的 sRGB hex 換成了 OKLCH 色彩空間，帶來更均勻的色階、更自然的漸層，以及在好螢幕上更鮮豔的 P3 廣色域。本篇你將學到：

• 色階系統：22 種色相 × 50–950 共 11 級明度，500 是標準主色、往兩端越淺／越深的規律
• 四大上色工具：text-*（文字）、bg-*（背景）、border-*（邊框）、ring-*（外框光暈）的統一命名，以及 fill／stroke／shadow 等延伸
• 透明度速記：一顆斜線的 bg-blue-500/50，取代舊版分散的 bg-opacity-*
• v4 的 OKLCH 與 P3：為什麼換色彩空間、對漸層與深色模式有什麼好處
• 自訂顏色：用 @theme --color-* 打造品牌語義色，以及 bg-[#1DA1F2]、text-(--my-var) 等任意色值

本系列以 TailwindCSS v4 為預設版本，範例皆可直接執行。凡涉及 v3 差異之處，我會特別標註。

核心概念

兩個維度：色相與色階

Tailwind 的每個顏色 class 都由兩個維度組成，理解這一點就掌握了整套系統：

       ┌─────────── 色相（Hue）：哪一種顏色
       │      ┌──── 色階（Shade）：多淺或多深，50–950
     bg-blue-500
     │
     └──────────── 工具前綴：套用到什麼屬性（bg=背景）

色相決定「是什麼顏色」，v4 內建 22 種：5 種灰階（slate、gray、zinc、neutral、stone，由藍冷到暖依序排列）加 17 種彩色（red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose）。色階決定「多淺或多深」，每種色相都有 11 個等級：50（幾乎全白）、100、200⋯⋯500（標準主色）⋯⋯900、950（幾乎全黑）。

以 blue 為例，把 11 級色階視覺化：

blue 色階（50 → 950）：
─────────────────────────────────────────────
  50  ░░  極淺（適合背景、標籤底色）
 100  ▒░
 200  ▒▒
 300  ▓▒  中淺（適合 hover 前的淺底、分隔線）
 400  ▓▓
 500  ██  標準主色（主色調、按鈕、連結）
 600  ██  略深（hover 深一階、正文連結）
 700  ██  深（深色文字、強調）
 800  ██
 900  ██  極深（深色模式背景、標題文字）
 950  ██  最深（幾乎黑）
─────────────────────────────────────────────
   淺 ←──────────────────────────────→ 深

實務上有幾條好用的直覺：50／100 當淺色背景與標籤底、200／300 當邊框與分隔線、500／600 當主色與按鈕、700／800／900 當文字與深色模式底。掌握「數字越小越淺、越大越深、500 是中間標準色」這條規律，配色時就有了方向感。

四大上色工具與延伸前綴

同一個「色相 + 色階」可以套到不同 CSS 屬性上，差別只在前綴。下表是最常用的一組對應：

命名規律高度一致：前綴決定「上到哪個屬性」，後面的「色相 - 色階」決定「什麼顏色」。記住 text／bg／border／ring 這四顆最常用的，其餘照樣照抄即可。除了 22 色，還有三個特殊值隨時可用：white（純白）、black（純黑）、transparent（透明），以及 current／inherit（見後文）。

v4 的關鍵改變：OKLCH 色彩空間

這是 v4 最重要的一項升級。v3 的預設顏色是十六進位 hex（走 sRGB 色彩空間），v4 全面改用 OKLCH：

/* v3：hex 色彩（sRGB 色彩空間） */
--color-blue-500: #3b82f6;

/* v4：OKLCH（感知均勻、支援 P3 廣色域） */
--color-blue-500: oklch(0.623 0.214 259.815);

oklch() 的三個數字分別是 L（Lightness，感知亮度 0–1）、C（Chroma，彩度）、H（Hue，色相角度 0–360）。改用 OKLCH 帶來三個看得見的好處：

• 色階更均勻：OKLCH 是「感知均勻」色彩空間，相同的 L 值在人眼看起來就是相同亮度，所以 400→500→600 的深淺跳動在視覺上更平順，跨色相的一致性也更好。
• 漸層更乾淨：兩色之間過渡不再經過灰濁的中間帶，漸層看起來更飽和自然（下一篇《背景與漸層》會深入）。
• P3 廣色域：在支援 P3 的螢幕（近年多數 Mac、iPhone、高階顯示器）上，能呈現超出 sRGB 範圍、更鮮豔的顏色；舊 sRGB 螢幕則自動退回相近顏色，不會壞掉。

好消息是——這一切都在底層自動發生。你照常寫 bg-blue-500 就好，不需要手動處理 OKLCH，只是在好螢幕上顏色更漂亮、漸層更順。

實作範例

理論看完，我們用幾個高頻範例把上色工具串起來。以下都是完整的 HTML + Tailwind，可直接貼進頁面觀察效果。

範例一：一顆按鈕看懂色階配色

先看最日常的主色按鈕。訣竅是用同一色相的不同色階，做出層次與互動回饋：

<!-- 主色按鈕：預設 600、hover 深一階到 700、外框光暈用同色半透明 -->
<button class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white
               shadow-sm transition
               hover:bg-blue-700
               focus:outline-none focus:ring-2 focus:ring-blue-500/50">
  主要按鈕
</button>

<!-- 次要按鈕：淺底 + 深字，同色相不同色階 -->
<button class="rounded-lg bg-blue-50 px-4 py-2 font-medium text-blue-700
               transition hover:bg-blue-100">
  次要按鈕
</button>

這兩顆按鈕示範了色階系統的核心用法。主色按鈕用 bg-blue-600 當底、text-white 讓文字在深底上清楚可讀，hover:bg-blue-700 讓滑鼠移上去時深一階產生按下感——這就是「同色相、跳一級色階」的標準互動配色。聚焦時的 focus:ring-2 focus:ring-blue-500/50 加上一圈半透明藍色光暈（ring 是繞在元素外的光暈框，/50 是透明度速記，稍後詳談）。次要按鈕則反過來：bg-blue-50 極淺底配 text-blue-700 深字，是同一個藍色系拉開明度差做出的柔和變體。整組配色從頭到尾只用了 blue 一個色相，靠色階變化就撐起完整的視覺層次。

範例二：透明度速記（斜線語法）

v4 最愛用的功能之一：任何顏色後面加 / 加數字，就是它的不透明度（0–100）：

<!-- 半透明藍色資訊區塊：底、框、字用同色相不同透明度／色階 -->
<div class="rounded-lg border border-blue-500/30 bg-blue-500/10 p-4 text-blue-800">
  <p class="font-medium">提示訊息</p>
  <p class="mt-1 text-sm text-blue-700/80">這個區塊的底色是藍色 10% 不透明、邊框是 30% 不透明。</p>
</div>

<!-- 特殊色也能用：白色 80%、黑色 50% -->
<div class="bg-black/50 p-6">
  <span class="rounded bg-white/80 px-2 py-1 text-sm text-black">遮罩上的標籤</span>
</div>

<!-- 需要精確小數時，用任意值語法 -->
<div class="bg-blue-500/[0.15]">15% 不透明的藍</div>

斜線後面的數字就是不透明度百分比：bg-blue-500/10 是「藍色 500、10% 不透明」，實際輸出 background-color: oklch(... / 0.1)。這套速記適用於幾乎所有顏色 utility——text-*/*、border-*/*、ring-*/* 都能用，連 white、black、current、transparent 這些特殊值也吃（bg-white/80、text-black/50）。當你需要 /10、/20、/50 以外的精確小數時，改用任意值方括號 bg-blue-500/[0.15]。

要特別提醒 v3 使用者：舊版的 bg-opacity-50、text-opacity-* 這類獨立透明度 class 在 v4 已被移除，一律改用斜線速記。新寫法的好處是「哪個顏色」與「多透明」集中在一顆 class，語義清楚、不再分散。

範例三：狀態色彩系統（語義化配色）

同一套「淺底 + 深字 + 中框」的公式，換不同色相就是一整組狀態提示——這是產品 UI 裡最實用的配色模式：

<!-- 成功：green -->
<div class="flex items-center gap-2 rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-green-700">
  <span class="size-2 rounded-full bg-green-500"></span>
  操作成功
</div>

<!-- 警告：amber -->
<div class="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-amber-700">
  <span class="size-2 rounded-full bg-amber-500"></span>
  請注意
</div>

<!-- 錯誤：red -->
<div class="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-red-700">
  <span class="size-2 rounded-full bg-red-500"></span>
  發生錯誤
</div>

<!-- 資訊：blue -->
<div class="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-blue-700">
  <span class="size-2 rounded-full bg-blue-500"></span>
  提示資訊
</div>

四種狀態用的是完全相同的色階公式：bg-{色相}-50（極淺底）+ border-{色相}-200（淺框）+ text-{色相}-700（深字）+ bg-{色相}-500（飽和圓點）。只要抽換色相——成功 green、警告 amber、錯誤 red、資訊 blue——就得到一整套視覺一致、含義分明的狀態樣式。這正是 Tailwind 色階系統的威力：一套色階規則套用到不同色相，整個產品的配色就自動統一。

範例四：自訂品牌色（@theme –color-*）

預設 22 色再豐富，也蓋不到你的品牌主色。v4 的做法是在 CSS 裡用 @theme 宣告 --color-* 變數：

/* 在你的主 CSS 檔（例如 app.css） */
@import "tailwindcss";

@theme {
  /* 品牌主色與其前景（文字）色 */
  --color-brand: oklch(0.55 0.22 250);
  --color-brand-foreground: oklch(0.98 0.01 250);

  /* 危險色、成功色等語義色 */
  --color-destructive: oklch(0.55 0.22 25);
  --color-success: oklch(0.55 0.18 145);
}

宣告完成後，Tailwind 會自動生成整組對應的 utility，用法和內建色完全一樣，連透明度速記都支援：

<!-- 自訂色照樣有 bg-/text-/border-/ring- 全套，還能用 /90 速記 -->
<button class="rounded-lg bg-brand px-4 py-2 text-brand-foreground transition hover:bg-brand/90">
  品牌按鈕
</button>

<div class="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-destructive">
  這是一則錯誤提示
</div>

這是取代 v3 tailwind.config.js 裡 theme.colors 的新做法：顏色直接在 CSS 用 @theme 定義、直接輸出成原生 CSS 變數，比走 JS 設定更直接也更有效率。只要命名為 --color-xxx，bg-xxx／text-xxx／border-xxx／ring-xxx 就全部自動就位。建議把品牌色、語義色（primary、destructive、success⋯）都放進 @theme 統一管理，讓整個專案的配色都指向同一組來源。

範例五：任意色值與 currentColor／inherit

若某個顏色只用一次、懶得進 @theme，可用任意值方括號臨時指定；而 current／inherit 則讓顏色能跟隨或繼承：

<!-- 任意 hex 色值 -->
<div class="bg-[#1DA1F2] text-white">品牌藍</div>

<!-- 任意 OKLCH 色值（注意：值裡的空格要用底線代替） -->
<div class="text-[oklch(0.65_0.25_30)]">自訂橘紅</div>

<!-- 任意色搭配透明度速記 -->
<div class="bg-[#3b82f6]/20">藍色 20% 不透明</div>

<!-- v4 更簡潔的 CSS 變數括號語法 -->
<div class="text-(--my-brand-color)">引用既有 CSS 變數</div>

<!-- currentColor：讓 SVG 圖示、邊框跟著文字顏色走 -->
<a href="#" class="text-blue-600 hover:text-blue-800">
  <svg class="size-4 fill-current inline">...</svg>
  連結文字（圖示顏色 = 文字顏色）
</a>

幾個關鍵點：任意值用方括號包住，bg-[#1DA1F2] 是任意 hex、text-[oklch(...)] 是任意 OKLCH（值裡的空格要改成底線 _，因為 class 名不能有空格），任意色一樣能接 /20 透明度速記。引用 CSS 變數時，v4 提供比舊版 text-[var(--x)] 更簡潔的圓括號語法 text-(--my-brand-color)。而 fill-current／text-current／border-current 的 current 對應 CSS 的 currentColor，意思是「用當前 color 的值」——最經典的用途就是讓 SVG 圖示自動跟隨文字顏色，text-blue-600 一改，圖示也跟著變藍，不用另外指定。inherit（text-inherit、bg-inherit）則是直接繼承父元素的對應顏色，適合要主動「取消」某個顏色、回歸繼承時使用。

常見錯誤與最佳實踐

五個最容易踩的色彩坑

坑一：對比度不足，文字看不清。 最常見的是淺灰文字配白底，或淺色階當正文字色。gray-400 配白底對比度只有約 3:1，達不到 WCAG AA 對一般文字要求的 4.5:1。根治法：正文字色至少用 gray-600（約 7:1）以上，400 這種淺階留給裝飾、佔位符、禁用狀態，別拿來當要讀的內文。

<!-- ❌ 淺灰配白底，對比不足、讀起來吃力 -->
<p class="bg-white text-gray-400">重要的正文內容</p>

<!-- ✅ 至少 gray-600 起跳，達標又好讀 -->
<p class="bg-white text-gray-700">重要的正文內容</p>

坑二：動態拼接 class 名稱，顏色整個消失。 Tailwind 是掃描原始碼來決定生成哪些 CSS，所以看不到被字串拼出來的 class。`text-${color}-500` 這種寫法會讓顏色完全不出現。根治法：用完整 class 名稱做對應表，讓每一顆 class 都以完整字面出現在程式碼裡。

// ❌ 錯誤：Tailwind 掃不到拼接後的完整名稱
const color = 'blue';
const cls = `text-${color}-500`;  // 這顆 class 不會被生成

// ✅ 正確：完整 class 字面對應
const colorMap = {
  blue: 'text-blue-500',
  red: 'text-red-500',
  green: 'text-green-500',
};
const cls = colorMap[color];  // Tailwind 掃得到每一顆

坑三：還在用 v3 的 bg-opacity-*。 從 v3 帶過來的習慣，寫 bg-blue-500 bg-opacity-50，在 v4 不會有透明效果——因為這類獨立透明度 class 已被移除。根治法：改用斜線速記 bg-blue-500/50，一顆 class 同時搞定顏色與透明度。

坑四：v4 邊框預設顏色變了。 v3 裡只寫 border 就會有淺灰邊框（預設 gray-200）；但 v4 把 border 的預設顏色改成了 currentColor（跟著文字顏色走）。從 v3 遷移時，原本沒指定顏色的邊框外觀會突然改變。根治法：明確指定邊框顏色 border border-gray-200，別依賴預設值。

<!-- v3：只寫 border 就有灰邊；v4：border 會變成文字色 -->
<div class="border">內容</div>

<!-- ✅ v4 明確指定邊框顏色，跨版本都一致 -->
<div class="border border-gray-200">內容</div>

坑五：到處撒調色盤原始值、沒抽語義色。 整個專案的按鈕東一顆 bg-blue-600、西一顆 bg-sky-500，哪天要換品牌色得全域搜尋取代。根治法：常用色進 @theme 抽成語義名（bg-primary、text-destructive），顏色來源集中一處，改一個變數全站跟著變。

色彩系統最佳實踐清單

• 先想語義、再挑顏色：問「這是主色／危險／成功？」而非「這要藍還是紅？」，常用色一律進 @theme 抽成 --color-primary 之類的語義名，換色只動一處。
• 正文字色至少 gray-600 起跳：確保對比度達 WCAG AA（4.5:1），400 這種淺階只留給裝飾與佔位符，別當內文。
• 同色相靠色階做層次：主色 600、hover 深一階 700、淺底 50／100、邊框 200／300——用一個色相的不同色階撐起完整視覺，比亂拼多個色相乾淨。
• 透明度一律用斜線速記：bg-blue-500/50 取代已移除的 bg-opacity-*，特殊色（white／black／current）與任意值 /[0.15] 都支援。
• 絕不動態拼接 class：用完整 class 名稱的對應表，讓 Tailwind 掃得到每一顆，避免顏色神秘消失。
• 圖示顏色用 fill-current：讓 SVG 跟著文字顏色走，改一次 text-* 全部同步，不必重複指定。
• v4 遷移記得補邊框顏色：border 預設從 gray-200 改成 currentColor，明確寫 border-gray-200 才不會外觀跑掉。

小結

這是 TailwindCSS 完整教學 系列的第十五篇，也是 視覺樣式章（TW-4） 的開場。上一篇 《常見版面模式》 我們把 Flexbox、Grid、定位、間距、尺寸五套工具組裝成聖杯佈局、Sticky Footer、卡片網格等真實骨架——那一篇搭好了頁面的「骨」；而這一篇替它上了「色」。回顧幾個重點：

• 兩個維度：顏色 = 色相（blue）+ 色階（500），22 色相 × 50–950 共 11 級明度，500 是標準主色、越小越淺、越大越深。
• 四大工具：text-*／bg-*／border-*／ring-* 統一命名，前綴決定上到哪個屬性，加上 fill／stroke／shadow 等延伸。
• 透明度速記：一顆斜線 bg-blue-500/50（0–100），取代 v4 已移除的 bg-opacity-*，特殊色與任意值 /[0.15] 都通吃。
• v4 的 OKLCH：預設調色盤改用感知均勻的 OKLCH、支援 P3 廣色域，色階更均勻、漸層更乾淨，且底層自動生效。
• 自訂顏色：用 @theme --color-* 打造品牌語義色（自動生成全套 utility），臨時色用 bg-[#1DA1F2]、text-(--my-var) 任意值，current／inherit 讓顏色跟隨或繼承。

色卡在手，配色就有了一致的基準。接下來我們把單一顏色延伸成「面」——下一篇 《背景與漸層》 會帶你玩轉 bg-gradient-* 漸層、多色停靠點，以及 v4 用 OKLCH 帶來的乾淨漸層過渡，讓你的版面從「有顏色」進化到「有質感」。