カラーシステム

この章では、Tailwind CSS のカラーパレットと色の使い方を学びます。

カラーパレット

Tailwind CSS は豊富なカラーパレットを提供しています。

グレースケール

名前	用途
slate	クールなグレー
gray	ニュートラルグレー
zinc	ウォームグレー
neutral	真のグレー
stone	ウォームストーン

v4.2 では、グレーとして振る舞いつつ個性を持つ neutral 系の中間色 4 ファミリー (taupe / mauve / olive / mist) が追加されました (各 50〜950 の 11 段階)。

カラー

名前	色
red	赤
orange	オレンジ
amber	琥珀
yellow	黄
lime	ライム
green	緑
emerald	エメラルド
teal	ティール
cyan	シアン
sky	スカイブルー
blue	青
indigo	インディゴ
violet	バイオレット
purple	紫
fuchsia	フクシア
pink	ピンク
rose	ローズ

色の濃淡

各色は 50〜950 の濃淡を持ちます。

値	用途
50	最も明るい (背景)
100	明るい背景
200	ホバー背景
300	ボーダー
400	プレースホルダー
500	標準
600	ホバー時
700	アクティブ
800	濃い
900	最も濃い
950	最暗 (v3.3 追加)

<div class="bg-blue-50">最も明るい青</div>
<div class="bg-blue-500">標準の青</div>
<div class="bg-blue-900">最も濃い青</div>

テキストカラー

<p class="text-gray-500">グレーテキスト</p>
<p class="text-blue-600">青テキスト</p>
<p class="text-red-500">赤テキスト</p>

<!-- 特殊な色 -->
<p class="text-black">黒</p>
<p class="text-white">白</p>
<p class="text-transparent">透明</p>
<p class="text-current">現在の色を継承</p>

背景カラー

<div class="bg-white">白背景</div>
<div class="bg-gray-100">薄いグレー</div>
<div class="bg-blue-500">青背景</div>

ボーダーカラー

<div class="border border-gray-300">グレーボーダー</div>
<div class="border-2 border-blue-500">青ボーダー</div>

透明度

色の透明度

v4 では color-mix() を使用した透明度をサポート。

<!-- v4: スラッシュで透明度を指定 -->
<div class="bg-blue-500/50">50% 透明</div>
<div class="text-black/75">75% 透明</div>

<!-- 任意の値 -->
<div class="bg-blue-500/[.35]">35% 透明</div>

全体の透明度

<div class="opacity-50">50% 透明</div>
<div class="opacity-75">75% 透明</div>
<div class="opacity-0">完全透明</div>

oklch カラースペース

v4 では oklch カラースペースを採用し、より鮮やかな色を表現できます。oklch は sRGB よりも広い P3 色域をカバーしており、特に青〜緑系の色がより鮮やかに表現されます。

<!-- P3 カラー対応ディスプレイで鮮やかに表示 -->
<div class="bg-blue-500">oklch ブルー</div>

P3 非対応ディスプレイでの挙動

P3 色域に対応していないディスプレイ (古いモニターなど) では、ブラウザが自動的に sRGB 範囲内の近似色にフォールバックします。この近似処理 (ガマットマッピング) は CSS の仕様に基づいてブラウザが自動的に行うため、開発者が手動でフォールバックを書く必要はありません。

CSS 変数での色指定

v4 では括弧を使って CSS 変数を参照します。

<!-- v4 -->
<div class="bg-(--my-color)">CSS 変数の色</div>
<div class="text-(--brand-primary)">ブランドカラー</div>

プレースホルダーカラー

<input
  class="placeholder-gray-400"
  placeholder="グレーのプレースホルダー"
/>

リングカラー (フォーカスリング)

<button class="focus:ring-2 focus:ring-blue-500">
  青いフォーカスリング
</button>

実践例

ボタンのカラーバリエーション

<!-- プライマリ -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-sm hover:bg-blue-600">
  プライマリ
</button>

<!-- セカンダリ -->
<button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-sm hover:bg-gray-300">
  セカンダリ
</button>

<!-- 成功 -->
<button class="px-4 py-2 bg-green-500 text-white rounded-sm hover:bg-green-600">
  成功
</button>

<!-- 危険 -->
<button class="px-4 py-2 bg-red-500 text-white rounded-sm hover:bg-red-600">
  削除
</button>

<!-- アウトライン -->
<button class="px-4 py-2 border-2 border-blue-500 text-blue-500 rounded-sm hover:bg-blue-50">
  アウトライン
</button>

アラートメッセージ

<!-- 情報 -->
<div class="p-4 bg-blue-50 border-l-4 border-blue-500 text-blue-700">
  <p class="font-bold">情報</p>
  <p>お知らせがあります。</p>
</div>

<!-- 成功 -->
<div class="p-4 bg-green-50 border-l-4 border-green-500 text-green-700">
  <p class="font-bold">成功</p>
  <p>操作が完了しました。</p>
</div>

<!-- 警告 -->
<div class="p-4 bg-yellow-50 border-l-4 border-yellow-500 text-yellow-700">
  <p class="font-bold">警告</p>
  <p>注意が必要です。</p>
</div>

<!-- エラー -->
<div class="p-4 bg-red-50 border-l-4 border-red-500 text-red-700">
  <p class="font-bold">エラー</p>
  <p>問題が発生しました。</p>
</div>

バッジ

<span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full">
  新着
</span>
<span class="px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded-full">
  完了
</span>
<span class="px-2 py-1 text-xs font-semibold bg-red-100 text-red-800 rounded-full">
  緊急
</span>

グラデーション背景

<div class="bg-linear-to-r from-blue-500 to-purple-500 text-white p-8">
  グラデーション
</div>

<div class="bg-linear-to-br from-pink-500 via-red-500 to-yellow-500 p-8">
  3 色グラデーション
</div>

アクセシビリティ

コントラスト比

テキストと背景のコントラスト比に注意しましょう。

<!-- 良い例: 十分なコントラスト -->
<p class="text-gray-900 bg-white">高コントラスト</p>
<p class="text-white bg-gray-900">高コントラスト</p>

<!-- 避けるべき例: 低コントラスト -->
<p class="text-gray-400 bg-gray-100">低コントラスト</p>

WCAG 2.1 基準

• 通常テキスト: 4.5:1 以上
• 大きいテキスト: 3:1 以上
• UI 要素: 3:1 以上

まとめ

• 豊富なカラーパレット (26 色 × 11 段階、v4.2 時点)
• text-* / bg-* / border-* で色を適用
• /50 等で透明度を指定
• v4 では oklch でより鮮やかな色
• コントラスト比を意識してアクセシブルに

次に読む

• 背景・ボーダー・シャドウ — 色の上にシャドウや角丸を重ねる
• ダークモード — dark: バリアントで配色を切り替える
• Tailwind CSS ガイド 目次 — 全 18 章の構成に戻る