Tailwind CSS 色一覧｜デフォルトカラーパレットとクラス名の見方

「tailwind 色 一覧」で検索する人は、クラス名の規則はなんとなく分かっているが、具体的にどのHEXが出るかを確認したい、というケースが多いです。ここではデフォルトパレットの構造と、実務でよく使う明度の目安をまとめます。

クラス名の構造

<p class="text-slate-700">本文</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white">送信</button>
<div class="border border-gray-200 rounded-lg">カード</div>

部分	例	意味
プレフィックス	text- bg- border-	文字・背景・枠線など
色名	slate blue emerald	色系統
明度	50〜950	数字が大きいほど暗い

透明度は bg-black/50 のように スラッシュ + 0〜100 で指定できます。rgba透明度一覧 と同じ考え方です。

デフォルトの色系統（22種）

Tailwind v3のデフォルト色系統は次のとおりです。

無彩色系: slate, gray, zinc, neutral, stone

彩色系: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

それぞれ 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 の11段階があります。

明度の選び方（実務の目安）

明度	よく使う用途
50〜100	ページ背景、zebra行、hoverの薄い背景
200〜300	ボーダー、区切り線、disabled風
500	イラスト・アイコンの基準色
600〜700	プライマリボタン、リンク文字
800〜900	見出し、ダークモードの背景
950	ほぼ黒に近い背景

「とりあえず blue-500」ではなく、背景なら100、ボタンなら600 と用途で桁を変えると、プロっぽい配色になります。

よく使う組み合わせ例

<!-- ライトUIのカード -->
<div class="bg-white border border-slate-200 shadow-sm">
  <h2 class="text-slate-900">見出し</h2>
  <p class="text-slate-600">本文</p>
  <a class="text-blue-600 hover:text-blue-800">リンク</a>
</div>

<!-- エラー表示 -->
<p class="text-red-600 bg-red-50 border border-red-200 px-3 py-2 rounded">
  入力内容を確認してください
</p>

<!-- ダークヘッダー -->
<header class="bg-slate-900 text-slate-100">

slate は青みがかったグレー、zinc は中性、gray はやや温かみ——無彩色も雰囲気が違うので、プロジェクトで1系統に統一するのがおすすめです。

slate / gray / zinc の違い（ざっくり）

• slate — 青みグレー。SaaSのダッシュボードでよく見る
• gray — Tailwindの古典的なグレー
• zinc — ニュートラル。AppleっぽいUI向き
• neutral / stone — さらに温かみや黄みのあるグレー

どれが「正解」ではなく、一度選んだら揃える方が重要です。

HEXを確認する

クラス名から実際の色コードを調べるには、下のツールが便利です。

デザインカンプのHEXと突き合わせるとき、近い明度を探す使い方が多いです。カスタム色を tailwind.config に足す手順は Tailwind CSSでカスタムカラー設定 を参照してください。

公式ドキュメントとの使い分け

Tailwind CSS公式のColors は最新の一覧とv4の変更を確認する場所です。本記事とツールは、よく使うクラス名の早見表として使ってください。

関連記事

トピック	記事
カスタム色	Tailwind CSSでデザインシステムの色を管理する方法
HEX変換	Tailwind Color｜カスタムパレットと class 名
コントラスト	色のコントラストチェック｜WCAG基準