網站導覽
設計變數

色盤

所有附編號的色階、固定色相別名，以及其他預設色彩 token。

本頁目錄

類別

類別宣告
bg-<name>background-color: var(--color-<name>);
fg-<name>color: var(--color-<name>);
b-<name>border-color: var(--color-<name>);
其他 16 個色彩家族
類別宣告
bb-<name>border-bottom-color: var(--color-<name>);
bl-<name>border-left-color: var(--color-<name>);
br-<name>border-right-color: var(--color-<name>);
bt-<name>border-top-color: var(--color-<name>);
bx-<name>border-inline-color: var(--color-<name>);
by-<name>border-block-color: var(--color-<name>);
bxe-<name>border-inline-end-color: var(--color-<name>);
bxs-<name>border-inline-start-color: var(--color-<name>);
bye-<name>border-block-end-color: var(--color-<name>);
bys-<name>border-block-start-color: var(--color-<name>);
fill-<name>fill: var(--color-<name>);
caret-<name>caret-color: var(--color-<name>);
accent-<name>accent-color: var(--color-<name>);
stroke-<name>stroke: var(--color-<name>);
outline-<name>outline-color: var(--color-<name>);
text-fill-color-<name>-webkit-text-fill-color: var(--color-<name>);

色彩 class 只會設定指定的屬性。要顯示邊框，請同時設定寬度，例如 b(1)、樣式，例如 b-solid，以及色彩，例如 b-blue-60。色彩角色使用相同的家族，並有各自的值對照表。

值

色盤編號是 token 的鍵，不是透明度或明度百分比。編號越大，OKLCH 明度越低。每個色票都可複製 CSS 值或變數參照；下方的色相別名會保留原始 token 參照。

色盤

選擇色票以複製原始 CSS 色彩值。

略過色票
stone
gray
zinc
neutral
slate
brown
orange
amber
yellow
lime
green
beryl
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
crimson
red
色盤結束

色相別名

類別值
bg-stonevar(--color-stone-30)
bg-grayvar(--color-gray-30)
bg-zincvar(--color-zinc-30)
bg-neutralvar(--color-neutral-30)
bg-slatevar(--color-slate-30)
bg-brownvar(--color-brown-40)
bg-orangevar(--color-orange-40)
bg-ambervar(--color-amber-40)
bg-yellowvar(--color-yellow-40)
bg-limevar(--color-lime-40)
bg-greenvar(--color-green-40)
bg-berylvar(--color-beryl-40)
bg-tealvar(--color-teal-40)
bg-cyanvar(--color-cyan-40)
bg-skyvar(--color-sky-60)
bg-bluevar(--color-blue-60)
bg-indigovar(--color-indigo-60)
bg-violetvar(--color-violet-60)
bg-purplevar(--color-purple-60)
bg-fuchsiavar(--color-fuchsia-60)
bg-pinkvar(--color-pink-60)
bg-crimsonvar(--color-crimson-60)
bg-redvar(--color-red-60)

其他色彩

類別值
bg-whiteoklch(100% 0 none)
bg-blackoklch(0% 0 none)
bg-currentcurrentColor

色相別名會選取固定色階

bg-blue 讀取 --color-blue，其預設值為 var(--color-blue-60)。bg-yellow 則會取得 --color-yellow-40。使用別名不代表不同色相會對應到相同的色階編號。

色相別名不共用同一個色階編號

預設的 blue 別名參照 blue-60，yellow 則參照 yellow-40。外框用來標示這些參照，不是任一背景 class 加上的邊框。圖中只顯示選取的色階。

文字說明
  1. bg-blue 讀取 --color-blue，而它在預設集中參照 --color-blue-60。藍色色票列標示出 60 階。
  2. bg-yellow 讀取 --color-yellow，而它參照 --color-yellow-40。黃色色票列使用相同的一組顯示色階，並標示出 40 階。
  3. 兩列都使用 10、20、40、60、80 與 90 階的實際色盤色彩。色票採等寬是為了比較，不是呈現感知距離的尺度。
  4. 這兩條別名參照鏈在淺色與深色配色方案中維持相同。重新定義別名或它參照的 token，就可能改變結果。

附編號的色階與色相別名不會隨配色方案切換。fg-text-blue 這類自適應文字別名屬於色彩角色。重新定義 token 可以改變其中任一種行為。

bg-current 讀取 currentColor，因此結果會跟隨元素的文字色彩。預設集沒有 --color-transparent token。需要透明色或其他字面色彩值時，請使用原生宣告，例如 (background-color:transparent) 或 (background-color:#175fe9)。

另見 色彩角色與原生值與透明度.

用法

這些狀態標籤明確指定了前景與背景色階。即使沒有色彩，文字仍能傳達狀態，而且所選色彩在兩種配色方案中都維持不變。

Paid Pending Overdue Draft 
<div>  <span class="… bg-green-5 fg-green-80">Paid</span>  <span class="… bg-amber-5 fg-amber-80">Pending</span>  <span class="… bg-red-5 fg-red-80">Overdue</span>  <span class="… bg-blue-5 fg-blue-70">Draft</span></div>
產生的 CSS
@layer theme {  :root,  :host {    --color-amber-5: oklch(96.24% .0573 98.1);    --color-amber-80: oklch(53.09% .1677 39.7);    --color-green-5: oklch(94.95% .071 145.5);    --color-green-80: oklch(51.96% .1768 142.5);    --color-blue-5: oklch(93.53% .0305 231.3);    --color-blue-70: oklch(46.26% .3057 266.7);    --color-red-5: oklch(94.05% .0239 17);    --color-red-80: oklch(53.09% .2178 29.2)  }}@layer utilities {  .bg-amber-5 {    background-color: var(--color-amber-5)  }  .bg-blue-5 {    background-color: var(--color-blue-5)  }  .bg-green-5 {    background-color: var(--color-green-5)  }  .bg-red-5 {    background-color: var(--color-red-5)  }  .fg-amber-80 {    color: var(--color-amber-80)  }  .fg-blue-70 {    color: var(--color-blue-70)  }  .fg-green-80 {    color: var(--color-green-80)  }  .fg-red-80 {    color: var(--color-red-80)  }}

自訂

在 @theme 中註冊色彩後，色彩家族就能使用它的鍵。這裡的 brand 可用於 bg-brand、fg-brand、b-brand 等 class。

@theme {  --color-brand: oklch(56% .2 262);}
產生的 CSS
@layer theme {  :root,  :host {    --color-brand: oklch(56% .2 262)  }}@layer utilities {  .bg-brand {    background-color: var(--color-brand)  }}

另見 主題指令與色彩.