设计令牌
调色板
所有带编号的色阶、固定色相别名以及其他预设颜色令牌。
本页内容
类
| 类 | 声明 |
|---|---|
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>); |
颜色类只设置指定的属性。要显示边框，请同时设置宽度，例如 b(1)、样式，例如 b-solid，以及颜色，例如 b-blue-60。颜色角色使用相同的族，并有各自的值对照表。
值
调色板编号是令牌的键，不是透明度或明度百分比。编号越大，OKLCH 明度越低。每个色样都可复制 CSS 值或变量引用；下方的色相别名保留原始令牌引用。
调色板
选择色样以复制原始 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-stone | var(--color-stone-30) |
bg-gray | var(--color-gray-30) |
bg-zinc | var(--color-zinc-30) |
bg-neutral | var(--color-neutral-30) |
bg-slate | var(--color-slate-30) |
bg-brown | var(--color-brown-40) |
bg-orange | var(--color-orange-40) |
bg-amber | var(--color-amber-40) |
bg-yellow | var(--color-yellow-40) |
bg-lime | var(--color-lime-40) |
bg-green | var(--color-green-40) |
bg-beryl | var(--color-beryl-40) |
bg-teal | var(--color-teal-40) |
bg-cyan | var(--color-cyan-40) |
bg-sky | var(--color-sky-60) |
bg-blue | var(--color-blue-60) |
bg-indigo | var(--color-indigo-60) |
bg-violet | var(--color-violet-60) |
bg-purple | var(--color-purple-60) |
bg-fuchsia | var(--color-fuchsia-60) |
bg-pink | var(--color-pink-60) |
bg-crimson | var(--color-crimson-60) |
bg-red | var(--color-red-60) |
其他颜色
| 类 | 值 |
|---|---|
bg-white | oklch(100% 0 none) |
bg-black | oklch(0% 0 none) |
bg-current | currentColor |
色相别名选择固定色阶
bg-blue 读取 --color-blue，其预设值为 var(--color-blue-60)。bg-yellow 则会取得 --color-yellow-40。使用别名不代表不同色相会对应相同的色阶编号。
色相别名不共享同一个色阶编号
预设的 blue 别名引用 blue-60，yellow 则引用 yellow-40。外框用于标示这些引用，不是任一背景类添加的边框。图中只显示所选色阶。
文字说明
- bg-blue 读取 --color-blue，而它在预设中引用 --color-blue-60。蓝色色样行标示 60 阶。
- bg-yellow 读取 --color-yellow，而它引用 --color-yellow-40。黄色色样行使用同一组显示色阶，并标示 40 阶。
- 两行都使用 10、20、40、60、80 和 90 阶的实际调色板颜色。色样等宽是为了便于比较，并非呈现感知距离的尺度。
- 这两条别名引用链在浅色与深色配色方案中保持相同。重新定义别名或它引用的令牌，就可能改变结果。
带编号的色阶与色相别名不会随配色方案切换。fg-text-blue 这类自适应文本别名属于颜色角色。重新定义令牌可以改变其中任一种行为。
bg-current 读取 currentColor，因此结果跟随元素的文本颜色。预设中没有 --color-transparent 令牌。需要透明色或其他字面颜色值时，请使用原生声明，例如 (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 等类。
@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) }}