Tailwind 50〜900 カラースケールの自動生成とクラス命名ルール

TailwindCSS Color CSS デザインシステム フロントエンド
結論：30秒で Tailwind カラーパレットを生成する
  • メインカラー: 500 番（ボタン・基本 UI）
  • ホバー / アクティブ: 600 (Hover) / 700 (Active)
  • 生成ツール: 下のコンポーネントで OKLCH 補間パレットを即生成

1. オンライン Tailwind カラースケール生成ツール

HEX コードを入力すると、OKLCH 色空間に基づいたグラデーションスケールと tailwind.config.ts 用の設定文を自動生成します。

🎨 この場でTailwindカラーを検索する

最も近い Tailwind クラス

—

—

2. 50〜950 シェードの役割とデザインガイドライン

シェード役割・主な用途明度 (Lightness) の目安
50テーブル/カードのホバー背景、最薄通知バックグラウンド97% 〜 99%
100バッジ背景、選択不可ボタン、カード枠線90% 〜 95%
200コンポーネントのボーダー (Border)、非活性入力枠80% 〜 85%
500メインのブランドカラー (Primary Button, Link)50% 〜 55%
600プライマリボタンのホバー状態 (Hover State)40% 〜 45%
700プライマリボタンのクリック状態 (Active State)30% 〜 35%
900 / 950テキスト色 (Text Color)、ダークモード時のカード背景10% 〜 15%

3. なぜ OKLCH / HSL 色空間で計算すべきなのか？

RGB（16進数 HEX）を直接掛け算・割り算して明度を変えると、特定の色（特に黄色や青）で急激に濁ったり彩度が落ちる現象が発生します。

function generateShade(oklchColor, targetLightness) {
  return `oklch(${targetLightness} ${oklchColor.c} ${oklchColor.h})`;
}

4. 注意点（ハマりどころ）

  1. bg-brand-500 と指定した際のアルファ不透明度クラスの対応
    • カスタムカラーを HEX 直書き（#3b82f6）で登録すると、bg-brand-500/50（透明度 50% 指定）が効かなくなる場合があります。Tailwind v3 では RGB / HSL 値の変数指定か、v4 の @theme 定義を使用してください。