Tailwind CSS v4のデフォルトカラーを50〜950までスウォッチで表示。クリックでクラス、CSS変数、OKLCH値、hexとしてコピーでき、@themeで色を追加・削除する方法も紹介します。
Tailwind CSS v4には、redやblueから、slate、zinc、stoneといったニュートラルまで、名前付きのカラーファミリーからなるデフォルトパレットが用意されています。各ファミリーは50（最も明るい）から950（最も暗い）までの11段階で、さらにblackとwhiteがあります。バージョン4ではすべての色をOKLCHで--color-blue-500のようなCSS変数として定義しており、bg-blue-500のように使います。
Tailwind v4でパレットの色が使われる場所
スウォッチをクリックすると、必要な形式でコピーできます。ユーティリティクラス、CSS変数、Tailwindが実際に使うOKLCH値、hexしか受け付けないツール向けの近似hexから選べます。名前で絞り込むと、1つのファミリーにすぐ移動できます。スウォッチの下の値一覧表には、theme.cssで定義されている全色が載っています。
バージョン4はパレットをOKLCHで定義しています。OKLCHのLチャンネルは知覚上の明度なので、見た目の明るさに合わせて段階を配置できます。また、広色域の画面ではより鮮やかな色を表現できます。oklch()関数は2023年5月から主要ブラウザーで使えるため、ブラウザーは値をそのまま読み込みます。
CSS内の@themeで、--color-名前空間に変数を宣言します。例：--color-midnight: #121063。するとTailwindがbg-midnight、text-midnightなどを生成します。tailwind.config.jsへの記述は不要です。
@theme内でファミリーをinitialに設定します。例：--color-lime-*: initial。これで生成されるユーティリティと変数からlimeの全段階が削除されます。
クラスにスラッシュと不透明度を付けます。50%ならbg-sky-500/50、任意値ならbg-pink-500/[71.37%]のように書きます。独自CSSでは、--alpha()関数で変数に同じことができます。
はい。パレットの色はすべてCSS変数として公開されているため、Tailwindを読み込むスタイルシートならcolor: var(--color-blue-500)が使えます。
これらはTailwindのtheme.cssの値です。blackは#000、whiteは#fffです。
Tailwind CSS v4のデフォルトパレット（OKLCH）
--color-名前空間の変数はユーティリティになります。この例では、bg-brand-500とtext-inkがデフォルトと並んで使えるようになります。
名前空間をinitialに設定すると削除されます。1行目は1つのファミリーを削除し、2行目はすべてのデフォルトカラーを削除します。
同じファミリーの淡い背景と暗い文字色に、背景より2段階暗い枠線を組み合わせます。
クラスを追加できないサードパーティのウィジェットに便利です。
クリックでコピーする内容
クラス
CSS変数
OKLCH
Hex（近似値）
ユーティリティプレフィックス
色を絞り込む
{v} をコピーしました
まだ何もコピーしていません。
その名前に一致するカラーファミリーはありません。
無料で始める · クレジットカード不要