TailwindCSS カラージェネレーター

任意のカラーを入力して完全な TailwindCSS カラーパレット設定を自動生成し、プロジェクトにすぐに適用できます。

機能特徴

• 16進数カラー値を入力して TailwindCSS カラーパレットを自動生成
• 50から950までの完全な色階システムを生成
• カラー名をインテリジェントに識別し、最も近い標準カラーシステムにマッチング
• 各色階の効果と対応するカラー値をリアルタイムプレビュー
• 直接使用可能な TailwindCSS 設定コードを自動生成

使用方法

1. カラー入力ボックスに16進数カラー値を入力または選択(例: #cb0101)
2. システムが自動的にそのカラーの完全なパレットを生成
3. 左側の色階プレビューで各レベルの視覚効果を確認
4. 右側に生成された TailwindCSS 設定コードが表示されます
5. コードパネルのコピーボタンをクリックして設定をクリップボードにコピー
6. コードをプロジェクトの tailwind.config.js ファイルに貼り付け

色階説明

生成されるパレットには以下の色階が含まれます:

• 50: 最も薄い色調、背景やハイライトに適しています
• 100-400: 淡色シリーズ、サブ要素に適しています
• 500: 主色調、通常は入力カラーに最も近いです
• 600-900: 濃色シリーズ、テキストや強調要素に適しています
• 950: 最も濃い色調、濃い背景や枠線に適しています

各色階は慎重に計算され、デザインにおいて良好な視覚的階層とコントラストを確保します。

設定コード例

生成されたコードは TailwindCSS 設定ファイルに直接追加できます:

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#fef2f2',
          100: '#fee2e2',
          500: '#ef4444',
          900: '#7f1d1d',
          950: '#450a0a'
        }
      }
    }
  }
}

使用シーン

• 新しいプロジェクトのテーマカラーシステムを迅速に構築
• 既存プロジェクトの配色方案を拡張
• 異なるカラーのパレット効果を探索
• デザインシステムのカラー一貫性を維持

注意事項

• 入力するカラー形式は有効な16進数値である必要があります(例: #ff0000)
• 生成される色階は自動的に明暗の変化に適応し、使いやすさを確保します
• ツールは最も近い標準カラー名をインテリジェントにマッチングし、識別を容易にします