トークン

カラーパレット

番号付きの全カラーステップ、固定の色相エイリアス、その他のプリセットカラートークン。

このページの内容

クラス

クラス	宣言
`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 にたどり着きます。エイリアスが異なる色相で同じステップ番号を指すとは限りません。

番号付きのステップと色相エイリアスは、カラースキームの切り替えでは変わりません。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)  }}

関連項目：テーマのディレクティブ、色.