Tailwind シェードジェネレータ: カスタムカラースケールが簡単に

Tailwind CSS は注意深く作成されたカラーパレットとともに出荷します: 22 の色相、各色相は 50 から 950 までの 11 のシェード。それはほとんどのユースケースをカバーしています — しかし、ブランドの特定の青を使用する必要があった瞬間、または会社ロゴに正確に一致する紫の瞬間、組み込みパレットは十分ではありません。

これはシェード ジェネレータが必須になる場所です。1 つのカラーを提供します — ブランド プライマリ、アクセント、セマンティック カラー — ジェネレータが完全な 50 から 950 スケールを出力し、tailwind.config.js に直接ドロップする準備ができた形式で出力します。

このガイドは、Tailwind のシェードシステムがどのように機能するか、ColorFYI の シェードジェネレータ を使用してカスタムスケールを生成する方法、ダークモードを含む Tailwind を効果的に使用するために設定する方法を説明します。

Tailwind のシェードシステムがどのように機能するか

Tailwind のカラースケールは 11 ステップの数値システムの周りに構築されています:

50  100  200  300  400  500  600  700  800  900  950

各ステップは知覚される明るさレベルを表します:

• 50 は最も明るい — ほぼ白、カラーのほんの少しだけのヒント
• 500 は「純粋な」カラー — 完全に彩度、中程度の明るさ
• 950 は最も暗い — ほぼ黒、深い色合い

数字は任意ではありません。それらは明るさで大まかに均等な知覚的ジャンプを作成するように間隔が空いています。100 と 200 の間のギャップはあなたの目に 700 と 800 の間のギャップとほぼ同じように見えます。

なぜ 11 ステップなのか?

11 ステップは UI のあらゆる一般的なユースケースをカバーするのに十分な粒度を提供します:

このシステムは、すべての Tailwind カラーが独自のミニデザインシステムのように機能することを意味しています。塗りつぶしボタンで読める白いテキストが必要な場合、-600 を使用します。ほぼ見えないバックグラウンド ティントが必要な場合、-50 を使用します。

50–950 スケールの詳細

Tailwind の組み込み violet スケールを使用して具体的な例を見てみましょう:

ベースカラー violet-500 が大まかに 57% 明るさで位置していることに注目してください — 0–100% の正確に中程度ではなく、スケール視覚的にバランスを保つために中点より少し上に位置しています。非常に暗いシェードはより小さい明るさ範囲 (15–40%) に圧縮されます。人間の目は暗いシェードを明るいものより正確に区別するためです。

カスタムカラースケールの生成

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

シェードジェネレータ は任意の 16 進コードを受け取り、完全な Tailwind フォーマット スケールを出力します。ワークフローは以下の通りです:

ステップ 1: 入力フィールドにブランドカラーを入力します。

例えば、ブランドは正確な青 #0057B8 を使用しています — 多くのエンタープライズブランドで使用されている中程度から暗い青。

ステップ 2: ジェネレータは知覚的に均一なアルゴリズムを使用してすべての 11 シェードを計算し、各ステップの 16 進コードと視覚的プレビューを示しています。

ステップ 3: 生成された Tailwind 設定ブロックをコピーします。

#0057B8 の出力はおよそ次のようなものです:

brand: {
  50:  '#E6F0FF',
  100: '#CCE1FF',
  200: '#99C3FF',
  300: '#66A4FF',
  400: '#3386FF',
  500: '#0057B8',  // 入力カラー、500 でアンカー
  600: '#0049A3',
  700: '#003B8A',
  800: '#002D6B',
  900: '#001F4D',
  950: '#001230',
},

「アンカーする」ことが何を意味するか

シェード ジェネレータはデフォルトで入力カラーを 500 位置でアンカーします。これは入力カラーがスケールの中心になることを意味します — 5 つより軽いシェードが上に生成され、5 つより暗いシェードが下に生成されます。

いくつかのジェネレータは異なる位置でアンカーすることを許可します。ブランドカラーが既にしか濃い濃紺の場合、700 または 800 でアンカーすると、より有用な範囲を生成するかもしれません。それが非常に明るいパステルである場合、200 または 300 でアンカーすることがより理にかなっています。シェードジェネレータ はアンカー ポイントを調整させます。

知覚的均一性が重要な理由

素朴なシェード ジェネレータは、HSL L 値を同じ増分だけ減らすことがあります: 95%、85%、75%、65%、55%、45%、35%、25%、15%。数学は単純ですが、視覚的な結果は不均一です。スケールの明るい端での遷移は暗い端での遷移よりも間隔が広く見えます。人間の視覚が中間トーンの明るさの違いに対してより敏感であるためです。

ColorFYI のジェネレータは OKLCH 明るさ補間を使用し、視覚的に等距の見た目のステップを生成します — Tailwind のハンドクラフト デフォルト スケールの知覚的品質に一致します。

tailwind.config.js の設定

カスタムカラーで拡張

カスタムカラー スケールを追加するための最も安全な方法は、Tailwind のデフォルトを置き換えるのではなく拡張することです:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#E6F0FF',
          100: '#CCE1FF',
          200: '#99C3FF',
          300: '#66A4FF',
          400: '#3386FF',
          500: '#0057B8',
          600: '#0049A3',
          700: '#003B8A',
          800: '#002D6B',
          900: '#001F4D',
          950: '#001230',
        },
      },
    },
  },
}

追加後、bg-brand-500、text-brand-700、border-brand-200、hover:bg-brand-600 などのクラスをプロジェクト全体で使用できます。

組み込みカラーを置き換える

完全にデフォルトカラー (例えば、Tailwind の blue をブランド青に置き換える) を置き換えたい場合:

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          50:  '#E6F0FF',
          // ... 950 を通して
        },
      },
    },
  },
}

bg-blue-500、text-blue-700 などのクラスは Tailwind の組み込み青の代わりにカスタム スケールを使用します。

ランタイム テーマ化のための CSS 変数の使用

ランタイム テーマ スイッチが必要なアプリケーション (例えば、ホワイトラベル製品、ユーザーがカスタマイズ可能なテーマ) の場合、スケールを CSS カスタム プロパティとして定義します:

/* globals.css */
:root {
  --color-brand-50:  #E6F0FF;
  --color-brand-100: #CCE1FF;
  --color-brand-200: #99C3FF;
  --color-brand-300: #66A4FF;
  --color-brand-400: #3386FF;
  --color-brand-500: #0057B8;
  --color-brand-600: #0049A3;
  --color-brand-700: #003B8A;
  --color-brand-800: #002D6B;
  --color-brand-900: #001F4D;
  --color-brand-950: #001230;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  'var(--color-brand-50)',
          100: 'var(--color-brand-100)',
          // ... 950 を通して
        },
      },
    },
  },
}

今、ランタイム (JavaScript 経由) で CSS 変数を変更すると、UI 全体が瞬時に再色になります。

Tailwind v4 設定

Tailwind CSS v4 は @theme を使用して設定全体を CSS に移動します:

@import "tailwindcss";

@theme {
  --color-brand-50:  #E6F0FF;
  --color-brand-100: #CCE1FF;
  --color-brand-200: #99C3FF;
  --color-brand-300: #66A4FF;
  --color-brand-400: #3386FF;
  --color-brand-500: #0057B8;
  --color-brand-600: #0049A3;
  --color-brand-700: #003B8A;
  --color-brand-800: #002D6B;
  --color-brand-900: #001F4D;
  --color-brand-950: #001230;
}

tailwind.config.js は必要ありません。--color-brand-* 変数は自動的にユーティリティ クラス (bg-brand-500、text-brand-700 など) として利用可能になります。

ダークモード シェード

ダークモードはカラー スケールを反転させません — どの端のシェードを使用するかを反転させます。同じスケールは両方のライトモードとダークモードで機能します; 背景を処理するスケールの端と テキストを処理する端を入れ替えるだけです。

反転原則

塗りつぶしボタン カラー (brand-500) は両方のモードで同じままです — それはアンカー ポイントです。その周りのすべてはフリップします: 明るい背景が暗い背景になり、ダーク テキストが明るいテキストになります。

Tailwind のダークモードで実装

<!-- 背景: ライトで light-50、ダークで dark-950 -->
<div class="bg-brand-50 dark:bg-brand-950">

  <!-- カード: ライトで light-100、ダークで dark-900 -->
  <div class="bg-brand-100 dark:bg-brand-900 rounded-lg p-6">

    <!-- 見出し: ライトで dark-900 テキスト、ダークで light-100 -->
    <h2 class="text-brand-900 dark:text-brand-100">カードタイトル</h2>

    <!-- 本文テキスト: ライトで dark-700、ダークで light-300 -->
    <p class="text-brand-700 dark:text-brand-300">カード コンテンツはここに行きます。</p>

    <!-- ボタン: 常に brand-500、ホバーはモードあたりシフト -->
    <button class="bg-brand-500 hover:bg-brand-600 dark:hover:bg-brand-400 text-white">
      アクション
    </button>

  </div>
</div>

別のダーク パレットを生成する

いくつかのデザイン システムについて、特にライトモードとダークモード間で大きな視覚的な分離を持つもの、別の「ダーク」スケールを生成する場合があります。これことができます:

• 同じ色相のわずかに暖かい、またはより冷たいバージョン (暗い背景で同等に見えるためにダーク モード用にもっと彩度が高い)
• ダーク背景に対してよりよく機能する補足色相

シェードジェネレータ の両方のスケールを生成し、別個のトークンとして定義します:

:root {
  /* ライトモード スケール */
  --color-brand-500: #0057B8;
}

[data-theme="dark"] {
  /* ダークモード スケール (わずかに彩度が高い) */
  --color-brand-500: #3386FF;
}

一般的なカスタム スケール シナリオ

ブランド カラーを正確に一致

多くのブランド ガイドラインは単一の Pantone または 16 進コードを指定します。ブランド カラーが #E63946 (鮮やかな赤) の場合、500 でアンカーされたスケールを生成します。ブランド赤は brand-500 になり、設計の柔軟性のために完全な範囲を取得します。

暖かい ニュートラル グレーを追加

Tailwind のデフォルト グレー スケールはクール傾斜です。オレンジまたは赤プライマリと調和するあたたかいグレーを作成するために、#8B7355 のような脱飽和度暖かいカラーのシェード スケールを生成し、ニュートラル グレーとして使用します。わずかな暖かさがプライマリと視覚的な一貫性を作成します。

セマンティック カラー スケールを作成

デザイン システムは可能性の高いセマンティック スケールを必要とします:

• 成功: #16A34A のような緑から生成
• 警告: #D97706 のような琥珀から生成
• エラー/危険: #DC2626 のような赤から生成
• 情報: #0284C7 のようなスカイブルーから生成

各ブランド primary および neutral スケールと一緒に設定の名前付きスケール (success、warning、error、info) になります。

主な要点

• Tailwind の 50–950 シェードシステムは 11 の知覚的に間隔が空いた明るさステップを提供します。ほぼ白からほぼ黒までで、あらゆる UI ユースケースをカバーするように設計されています。
• ColorFYI の シェードジェネレータ は知覚的に均一なアルゴリズムを使用して、任意の単一 16 進コードを完全な Tailwind 準備スケールに変換します。
• theme.extend.colors を使用して tailwind.config.js を拡張してカスタム スケールを追加し、Tailwind のデフォルトを失うことなく; Tailwind v4 で @theme を使用します。
• ランタイム テーマ スイッチングとホワイトラベル アプリケーションのために CSS カスタム プロパティ (var(--color-brand-500)) を使用します。
• ダークモードは異なるカラーを必要としません — 同じスケールが反転しています: 明るいシェードが背景になり、暗いシェードがテキストになります。
• プライマリ、ニュートラル/グレー、セマンティック (成功、警告、エラー、情報) カラー用の別個のスケールを生成して、完全なデザイン システムを構築します。
• 数値命名規則を一貫して使用して、開発者が正確にどのシェードを手に入れるかを知りますが: ホバー状態には 600、白上のアクセス可能なテキストには 700、微妙な背景には 100。