Tailwind CSS カラーシステム: シェードの生成方法

Tailwind CSS は、Web 開発で最も広く使用されているカラーシステムの 1 つを備えています。22 のカラーファミリーのパレット — 各ファミリーが 50 から 950 までの 11 のシェードに分割 — は数百万の Web サイトに電力を供給し、開発者がカラースケールについて考える方法の実質上の標準になっています。しかし、これらのシェードはどこから来ているのか、どのように生成されているのか、そして システムに見事にフィットするあなた自身のスケールをどのように構築できるのでしょうか? この記事はそれらのすべての質問に答えます。

Tailwind のカラー設計哲学

Tailwind は単純な算術アプローチをシェード生成に使用しません。代わりに、Tailwind チームは知覚的な明るさと美的判断の組み合わせを使用して、オリジナルパレットの各シェードをハンドキュレーションし、次のようなシェードを作成することを目的としています:

1. すべてのステップで有用: 50 から 950 までの各シェードは、誰かが見事に使用したいと思うかもしれないシェード — ギャップフィラーではなく未使用です。
2. 色相全体で一貫: 青の 500 シェードは、基礎的な 16 進値が完全に異なるにもかかわらず、緑の 500 シェードほど知覚される明るさで同様に「中程度」に感じるべきです。
3. WCAG 対応: より暗いシェード (700–950) は白に対して AA コントラストを達成すべき; より明るいシェード (50–200) は黒に対して AA コントラストを達成すべきです。

この哲学は、単純な HSL 明るさ公式で Tailwind パレットを生成できない理由を説明します。色相は知覚された明るさにおいて固有に異なります — 黄色は同じ HSL 明るさ値の青より本来的に明るいため — そのため各カラーファミリーは個別のチューニングが必要です。

22 のカラーファミリー

Tailwind v3 と v4 は 22 の名前付きカラーファミリーを出荷します:

5 つのニュートラルファミリー (slate から stone まで) に注目してください: これらは同じグレーの異なる彩度レベルではありません。各ファミリーには異なるハフカスト — slate はブルーグレーに傾き、stone は暖かいブラウングレーに傾き、neutral は最も純粋な無彩色です。これは、クール、暖かい、またはニュートラルトーンを呼びかける環境での灰色の足場に関して、デザイナーに選択肢を与えます。

11 のシェードステップ

各カラーファミリーには 11 のシェードが含まれています:

950 シェードは後で追加されました。デザイナーは 900 が時々深い影効果に対して十分に暗くないことを発見しました。特にダークモードでは、表面カラーが非常に暗く、レイヤリング用のより深いシェードを必要とします。

500 ステップは意図的に各カラーの「カノニカル」シェードです — 「青が欲しい」または「緑が欲しい」と誰かが言った場合に最も見ていると思うものです。他のすべてのステップはこのアンカーに対して理解されます。

シェードアルゴリズムがどのように機能するか

Tailwind のカラーはハンドキュレーションされていましたが、チームは知覚的一貫性を維持するために OKLCH カラースペースに基づいたプロセスを使用しました。OKLCH (Oklab Lightness Chroma Hue) は、明るさの同じ数値変更が知覚される明るさの同じ変更を生成するように設計されており、HSL または RGB とは異なります。

カラーファミリーの一般的なプロセスは次のようです:

1. 500 値を選択: このファミリーのプライマリブランドカラーを OKLCH または同等の知覚空間で定義します。
2. 各ステップの明るさターゲットを設定: 11 ステップを特定の OKLCH 明るさ値にマップします — 例えば、ステップ 50 は OKLCH 明るさ 0.97 を目標とし、ステップ 950 は 0.13 を目標とするかもしれません。
3. 彩度と色相を維持: 可能な限り、ステップ全体で彩度 (彩度) と色相角を同じに保ち、明るさのみを調整します。
4. 色相シフトをハンドアジャスト: 多くの色相は OKLCH で軽くなったり暗くなったりするときに望まない色相シフトを示します。イエローは、暗くなるとゴミになるのを避けるためにグリーンに向かってシフトします。ヒューマンアジャストメントは各ステップで必要です。
5. sRGB 16 進に変換: 最終的な OKLCH 値は CSS で使用するために 16 進コードに変換されます。

Tailwind パレットが黄色と青を処理する方法を比較することで、このプロセスの結果を確認できます。青のステップは温度で微妙にシフトします (最も暗い青はより多くのインディゴキャラクターを持ちます) 一方、黄色のステップは泥濘を避けるためにオリーブにシフトします。これらは、純粋なアルゴリズムが自動的に生成しないであろう意図的な知覚的修正です。

カラーコンバータ を使用して、任意の Tailwind 16 進値を OKLCH スペースで検査し、スケール全体で明るさ、彩度、色相がどのように変化するかを観察します。

Tailwind カラーパレットのカスタマイズ

Tailwind v3 (tailwind.config.js)

Tailwind v3 では、tailwind.config.js でパレットを拡張または置き換えます:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
    },
  },
}

extend を使用して、すべての組み込みカラーを保ちます; theme.colors を直接置き換えると、それらが削除されます。

Tailwind v4 (CSS ファースト設定)

Tailwind v4 は JavaScript 設定ファイルを排除します。カラーはメインの CSS ファイルで CSS カスタムプロパティとして定義されます:

@import "tailwindcss";

@theme {
  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #bae6fd;
  --color-brand-300: #7dd3fc;
  --color-brand-400: #38bdf8;
  --color-brand-500: #0ea5e9;
  --color-brand-600: #0284c7;
  --color-brand-700: #0369a1;
  --color-brand-800: #075985;
  --color-brand-900: #0c4a6e;
  --color-brand-950: #082f49;
}

これは bg-brand-50 から bg-brand-950 まで、text-brand-*、border-brand-* などのユーティリティクラスを生成します — 組み込みカラーが機能するのと全く同じですが、カスタムハフを使用します。

Tailwind v4 で何が変わったか

Tailwind v4 はカラーシステムへのいくつかの重要な変更を導入しました:

CSS 変数としての真実のソース

v4 では、すべての組み込みカラーが CSS カスタムプロパティとして公開されます。これは、Tailwind ユーティリティクラスなしで、プレーン CSS で任意の Tailwind カラーにアクセスできることを意味します:

.custom-element {
  background-color: var(--color-blue-500);
  border-color: var(--color-blue-200);
}

これは v3 では追加のツール化またはマニュアルで 16 進値を複製することなく、容易には可能ではありませんでした。

OKLCH カラー値

Tailwind v4 は sRGB 16 進ではなく OKLCH でカラーを表現しています。これにはいくつかの利点があります:

• 広色域サポート: P3 または Rec. 2020 色域をサポートするディスプレイでは、16 進コードが表現できるものより活発なカラーが可能です。
• より良い補間: 2 つの Tailwind カラー間のグラデーションは、より知覚的に均一な結果を生成します。
• 予測可能な操作: OKLCH で明るさを調整することは、HSL で調整するよりも信頼性が高いです。

ユーティリティクラスを使用する開発者への変更はほぼ透過的です — bg-blue-500 は同じように見えます — ですが、カラー間で補間するカスタムグラデーションまたはアニメーションを構築する場合は重要です。

セマンティックカラートークン

v4 はまた、セマンティックカラートークン — カラーが見ているものではなく何をするのかを説明する変数 — に対してより良いサポートを導入しました:

@theme {
  --color-primary: var(--color-blue-600);
  --color-primary-hover: var(--color-blue-700);
  --color-surface: var(--color-slate-50);
  --color-on-surface: var(--color-slate-900);
}

このパターンはデザインシステムのセマンティック層を Tailwind のスケール層に マップし、コンポーネント マークアップを変更せずにテーマを切り替える能力を与えます。

Tailwind との一致するカスタムスケールの構築

デフォルトパレットにないカスタムカラーが必要な場合 — ブランド特有のオレンジまたは一品物の緑 — 2 つのオプションがあります: 最も近い組み込みファミリーを見つけて調整するか、完全に新しいスケールを生成してください。

シェードジェネレータを使用する

シェードジェネレータ は単一の入力 16 進コードから完全な 50–950 スケールを生成します。ブランドのプライマリカラーを入力すると、ツール:

1. 16 進を OKLCH に変換
2. 11 ステップの各ライトネスターゲットを計算
3. より軽いシェードが彩度が低く、より暗いシェードが深さを維持するように彩度を適切に調整
4. Tailwind 設定に貼り付ける準備ができた sRGB 16 進値を出力

例えば、ブランドカラーが #0F766E (ティール緑) の場合、ジェネレータは生成される可能性があります:

これは Tailwind の組み込みティール スケールと一致し、ジェネレータの出力が公式パレットの視覚的な特性に一致することを実証します。

ダークモード用の Tailwind カラーの使用

Tailwind のシェードシステムは、スケールがミラーイメージ値を提供するため、ダークモードに適しています。一般的な規約:

重要な洞察は、カラーを反転させるのではなく、シェード番号を反転させることです。ライトモードで slate-100 を使用するときは、ダークモードで slate-900 を使用します。リンクやボタンなどの対話的なカラーについては、暗いシェード (600) からダークモードでより明るいシェード (400) にシフトし、異なる背景に対してコントラストを維持します。

Tailwind の dark: バリアントはこれを体系的にします:

<div class="bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100">
  <button class="bg-blue-600 dark:bg-blue-400 text-white dark:text-slate-900">
    アクション
  </button>
</div>

一般的なカラーシステムの間違い

両方のモード向けに同じシェードを使用

dark: 上書きなしで bg-blue-600 を適用することは一般的な間違いです。ダークモードでは、暗い背景と明るい青要素は大丈夫に見えますが、暗い背景上の白いカードは刺激的になります。背景カラーの両方のライトとダーク変数を常に定義します。

コントラスト用の隣接しないシェードを選択

gray-400 テキストを gray-300 背景で使用すると、不十分なコントラストを作成します。一般的なルール: フォアグラウンドとバックグラウンド シェード間の最低 4 ステップギャップを維持 (例えば、slate-100 上のテキストは最低 slate-700); WCAG AA (4.5:1) または AAA (7:1) に対する特定の組み合わせを確認するために コントラストチェッカー を使用します。

多くのカラーファミリーを使用しすぎる

Tailwind パレットには 22 のファミリーがありますが、ほとんどのインターフェースは最大 3 つ必要です: ニュートラル用の 1 つ (グレー/スレート)、プライマリブランドカラー用の 1 つ、セマンティック状態用の 1 つ (エラーは赤、成功は緑、警告は黄色)。4 つ以上の異なるカラーファミリーを選ぶと、目的なく視覚的複雑性を作成します。

主な要点

• Tailwind CSS は 22 のカラーファミリーを出荷し、それぞれが単純な算術公式ではなく、知覚的明るさ分析とヒューマンキュレーションを通じて生成された 11 のシェード (50 から 950) を含みます。
• 5 つのニュートラルファミリー (slate、gray、zinc、neutral、stone) はそれぞれ異なるハフキャストを持ち、デザイナーに暖かい、クール、またはニュートラルグレーオプションを与えます。
• 500 ステップは各カラーファミリーのカノニカル「純粋」シェード; 他のすべてのステップはそれに対して理解され、950 ステップは v3.3 にはより深い影とダーク表面レイヤリング用に追加されました。
• Tailwind v4 は CSS ファースト設定を @theme で移動し、すべてのカラーを CSS カスタムプロパティとして公開し、より良い知覚的均一性と広色域サポートのために内部的に OKLCH を使用します。
• シェードジェネレータ は任意の入力 16 進コードから完全な Tailwind 互換 50–950 スケールを生成し、OKLCH ベースの明るさターゲットを使用します。
• ダークモードについては、ハフを反転させるのではなく、シェード番号 (50 ↔ 900) を反転させ、より暗いシェード (600) からより明るいシェード (400) への対話的なカラーをシフトし、暗い背景に対してコントラストを維持します。