コンテンツへスキップ

Tailwind CSSのカラー：v4・v3の完全パレット

Tailwind CSSの全カラーを50から950まで、OKLCH（v4）とHEX（v3）の公式値で掲載。色調をクリックすると、クラス、CSS変数、コードをコピーできます。

UIカラーを見る
バージョン
コピー形式

Tailwind v4の新色：色味のある4つのグレー、Mauve、Olive、Mist、Taupe。

各色の値

色を選ぶと、11の色調をクラス、OKLCH、HEX、RGB、最もコントラストの高いテキスト色とともに表示します。

Blue · Tailwind v4

色調クラスOKLCHHEXRGBテキスト
50Aa19.3:1
100Aa17.2:1
200Aa14.8:1
300Aa11.6:1
400Aa8.0:1
500Aa5.6:1
600Aa5.2:1
700Aa6.8:1
800Aa8.8:1
900Aa10.4:1
950Aa14.8:1

Tailwind v4はOKLCHで色を定義しており、一部はsRGBの範囲外です。HEXは最も近いsRGBの色です。

Tailwind CSSのカラーパレットとは

Tailwind CSSには、名前付きのファミリー（Slate、Red、Blue…）で整理された定義済みのカラーパレットがあり、各ファミリーに50（最も明るい）から950（最も暗い）まで11の色調があります。この番号付けは、多くのライブラリが採用する標準になっています。

各色はbg-blue-500やtext-red-700のようなクラスで使います。上の表から、クラス名、CSS変数、HEX・RGB・HSL・OKLCHのコードをコピーできます。

どの色調を何に使うか

決まったルールはありませんが、Tailwindで作られたほとんどのUIは、各ファミリー内で似たパターンに従っています：

50–100
背景. やわらかい面、カード、強調エリア。
200–300
枠線. 区切り線、入力欄の枠線、無効状態。
500–600
アクション. ボタン、リンク、アクティブな要素。600は白い文字とのコントラストが良いことが多いです。
700–900
テキスト. 同じファミリーの明るい背景の上の見出しや本文。
950
ダークモード. 純粋な黒の代わりに、色味のある暗い背景。

Tailwind v3とv4：カラーの変更点

番号と名前は同じですが、値は異なります。v4ではパレット全体が再調整されました。そのため、このページでは各バージョンの公式値を別々に掲載しています。

blue-500 = oklch(62.3% 0.214 259.815)

Tailwind v4

  • OKLCHで定義され、明度のステップがより均一。
  • 広色域ディスプレイ（Display P3）向けの、より鮮やかな色調。
  • 各色がCSS変数として存在：var(--color-blue-500)。
  • 色味のある新しいグレーが4つ：Mauve、Olive、Mist、Taupe。

blue-500 = #3b82f6

Tailwind v3

  • HEX（sRGB）で定義。
  • 22ファミリー：グレー5種とカラー17種。
  • クラスまたはtheme('colors.blue.500')関数で使用。
  • 今も多くの既存プロジェクトで使われているバージョン。

CSSでTailwindのカラーを使う方法

クラスに加えて、パレットのどの色も独自のCSSで使えます。v4では通常のCSS変数、v3ではtheme()関数でアクセスします。

Tailwind v4

@import "tailwindcss";

.card {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  color: var(--color-blue-900);
}

@theme {
  --color-brand-500: oklch(62.3% 0.214 259.815);
}

Tailwind v3

.card {
  background: theme('colors.blue.50');
  border: 1px solid theme('colors.blue.200');
  color: theme('colors.blue.900');
}

v4で独自の色を追加するには、@theme内で--color-プレフィックスを付けて宣言すると、クラスが自動で使えるようになります（bg-brand-500、text-brand-500…）。

よくある質問

名前と番号は同じですが、v4ではパレットがOKLCHで再調整され、色調がやや鮮やかになり、明度のステップがより均一になりました。そのためblue-500のHEXは両バージョンで異なります。v4には新しいグレーが4つ（Mauve、Olive、Mist、Taupe）追加されています。

Tailwindの標準スケールです。50は最も明るい色調（ほぼ白）、950は最も暗い色調（ほぼ黒）で、その間のステップがUI全体の背景、テキスト、枠線、状態を一貫してカバーするように設計されています。

Tailwind v4では各色がCSS変数として使えます。例：var(--color-blue-500)。v3ではCSSファイル内でtheme('colors.blue.500')関数を使います。

Tailwind v4はOKLCHで色を定義しており、一部はHEXコードで表せるsRGBの範囲を超えています。その場合は最も近いHEXを表示しています。プロジェクトがOKLCHに対応していれば、正確な色にはその値を使ってください。

各色の「テキスト」列に、白と黒のどちらがよりコントラストが高いかが比率とともに表示されます。目安として、通常テキストには4.5:1以上が必要です。どんな組み合わせもコントラストチェッカーで確認できます。

OKLCHは明度を知覚に基づいて計算する色空間で、同じ明度の2色は人の目に同じ明るさに見えます。そのため、従来のRGBベースよりも均一なカラースケールが得られます。