Tailwind CSSのカラー：v4のOKLCHパレット、カスタムカラーとシェード

Tailwindのカラーパレットの構成

Tailwind v4.3のデフォルトパレットには、名前付きのスケールが26種類あります。有彩色は17種類で、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、roseです。ニュートラルは9種類で、v3からあるslate、gray、zinc、neutral、stoneに、v4で追加されたmauve、olive、mist、taupeが加わります。さらにblackとwhiteがあります。

どのスケールも同じ11段階で構成されています。50、100、200から900まで、そして950です。50はほぼ白、950はほぼ黒です。クラス名はユーティリティに色と段階を付けた形で、bg-blue-500、text-rose-700、border-zinc-200のようになります。

段階の番号はスケール内の位置であって、明度の値ではありません。500の段階でも、OKLCHの明度はgrayの55.1%からyellowの79.5%まで幅があります。yellow-500とblue-500を文字色にしたときの扱いがまったく違うのはこのためです。

Tailwindのblue：全シェードのOKLCH、HEX、コントラスト

Tailwind v4が定義するblueのスケール全体です。HEXの列は、明度と色相を保ったままクロマを下げて求めた最も近いsRGBの色です。コントラスト比はそのHEXで測ったWCAG 2の値です。

白背景で本文テキストの4.5:1を満たす最初の段階はblue-600です。blue-500は黒背景では5.58:1で合格しますが、白背景では3.76:1で不合格です。白と黒の両方で4.5:1を満たすblueの段階はないため、ライトテーマとダークテーマでは別の段階を使う必要があります。

白背景でWCAG AAを満たすTailwindのシェード

合格する最も明るい段階は色相によって変わります。orange、amber、yellow、limeと、緑系、ティール系、シアン系、スカイ系は500ではまだ明るく、本文テキストには700が必要です。red、blue、violet、purple、fuchsia、pink、roseは600で、indigoは500で合格します。例外はyellowで、yellow-600でさえ2.93:1にとどまり、大きな文字の基準も満たしません。

結果を予測するには、段階の番号より明度のほうが確実です。286色すべてで、OKLCHの明度が58%未満のシェードは白背景で4.5:1を満たし、59.2%を超えるシェードはすべて満たしません。クラスの値のLを見れば、テストする前に答えがわかります。

olive以外のニュートラルはすべて500で合格します。olive-500は明度58%で黄みがかった色相を持ち、4.25:1にしか届きません。gray-500とolive-500の文字色は置き換えがきかないということです。

Tailwind v3とv4のカラーの違い

v3では、色はtailwind.config.jsのtheme.extend.colorsにHEX値で定義していました。v4では設定がCSSに移り、色は@theme内のテーマ変数としてOKLCHで書かれ、CSS変数として公開されます。そのため、素のCSSやインラインスタイルでもvar(--color-blue-500)が使えます。

パレット自体は描き直されたのではなく、調整されただけです。OKLCHに変換すると、v3のblue-500（#3b82f6）はv4のblue-500と明度も色相もまったく同じです。上がったのはクロマだけで、0.188から0.214になりました。blueのほかの段階も同じ傾向ですが、blue-400だけは明度も0.7ポイント暗くなっています。コントラストはほとんど変わらず、色はより鮮やかに見えます。

増えたクロマはsRGBの外にまで及びます。v4の286色のうち94色はsRGBの外、Display P3の内側にあり、すべて有彩色です。orangeは11段階中9段階、blueは4段階（200〜500）が外側です。P3対応の画面では本来の色が表示され、sRGBの画面ではブラウザが近い色で表示します。v4の対象はSafari 16.4、Chrome 111、Firefox 128以降で、いずれもoklch()に対応しています。

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

.card {
    border-color: var(--color-blue-500);
}

Tailwind v4でカスタムカラーを追加する方法

@theme内で、--color- の名前空間に変数を宣言します。--color- より後ろの部分がクラス名になるので、--color-brand を定義すればbg-brand、text-brand、border-brand、ring-brandなどすべてのカラーユーティリティと、CSSのvar(--color-brand)が使えるようになります。値にはHEX、rgb()、hsl()、oklch()のどれでも使えます。

デフォルトパレットを拡張するのではなく置き換えたい場合は、まず --color-*: initial で名前空間をリセットしてから、必要な色だけを定義します。ユーティリティは実際に使ったクラスの分しか生成されないので、ほとんどのプロジェクトはデフォルトを残したままにしています。

@import 'tailwindcss';

@theme {
    --color-brand: #e4572e;
    --color-ink: oklch(21% 0.02 260);
}

アクセントカラーが1色だけなら --color-brand ひとつで十分です。hover時の色、淡い背景色、ダークモードが必要になったら、番号付きの段階を持つスケール全体を定義しましょう。

50〜950のカスタムスケールを作る方法

下のスケールは #e4572e から生成したものです。この色の明度63.7%は500の段階に一致するので、ブランドカラーはそのまま500に収まります。ほかの段階はTailwindの明度カーブに沿い、色相は同じまま、クロマは500と600で最大になって両端に向かって小さくなります。すべてsRGBの範囲に収まっているため、HEX値は正確です。

Tailwind自身の暖色系と同じく、このスケールも白背景の本文テキストには600が必要です。brand-500は3.68:1で、大きな文字とアイコンにしか使えません。

@theme {
    --color-brand-50: oklch(97% 0.01103 36.478);
    --color-brand-100: oklch(93.477% 0.02574 36.478);
    --color-brand-200: oklch(88.485% 0.04964 36.478);
    --color-brand-300: oklch(81.145% 0.08641 36.478);
    --color-brand-400: oklch(71.064% 0.14524 36.478);
    --color-brand-500: oklch(63.723% 0.18385 36.478);
    --color-brand-600: oklch(56.583% 0.19167 36.478);
    --color-brand-700: oklch(49.952% 0.16921 36.478);
    --color-brand-800: oklch(43.729% 0.14814 36.478);
    --color-brand-900: oklch(38.935% 0.11766 36.478);
    --color-brand-950: oklch(27% 0.07538 36.478);
}

貼り付けるときは精度を落とさないでください。明度を0.1%単位、クロマを小数点以下3桁に丸めると、brand-600がわずかにsRGBの外に出ます。実害はありませんが、HEXとは正確に一致しなくなります。

bg-blue-500/50のような不透明度モディファイアの仕組み

色の後ろにスラッシュを付けるとアルファ値を指定できます。bg-blue-500/50は、不透明度50%のblue-500です。v3ではこれがrgb(59 130 246 / 0.5)にコンパイルされていたため、Tailwindがチャンネルに分解できる色でしか使えませんでした。CSS変数で定義したカスタムカラーには、rgb(var(--brand) / <alpha-value>)という特別な書式が必要でした。

v4ではモディファイアがOklabのcolor-mix()にコンパイルされ、色をtransparentと混ぜます。そのため、テーマ変数、bg-[#e4572e]/50のような任意の値、独自のCSS変数など、どんな色でも使えます。

不透明度はコントラストに影響します。白の上では、blue-500/50は #95bfff、blue-500/10は #eaf2ff として表示されます。blue-600の文字は5.25:1ですが、text-blue-600/60にすると2.62:1まで下がり、大きな文字の基準すら満たしません。

• blue-500#2b7fff
• 白の上のblue-500/50#95bfff
• 白の上のblue-500/20#d5e5ff
• 白の上のblue-500/10#eaf2ff

.bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}

任意のHEXに最も近いTailwindのクラスを探す方法

HEXを286色すべてのシェードと、Oklabでの知覚的な距離（ΔEOK）で比較します。約0.02未満なら並べても差がほとんどわからないので、Tailwindのクラスで置き換えられます。約0.04を超える場合は、カスタムカラーを追加しましょう。

表は実際の一致例です。v3の古いHEX値はv4の同じクラスに対応し、#ff5733 のような典型的なブランドオレンジはorange-600とred-400の中間に位置します。PickShadeのTailwindページでは、どんな色でもこの検索を行い、最も近い3つのクラスを表示します。

よくある質問