ドキュメント
Generated by AI
TailwindCSS カラージェネレーター
任意のカラーを入力して完全な TailwindCSS カラーパレット設定を自動生成し、プロジェクトにすぐに適用できます。
機能特徴
- 16進数カラー値を入力して TailwindCSS カラーパレットを自動生成
- 50から950までの完全な色階システムを生成
- カラー名をインテリジェントに識別し、最も近い標準カラーシステムにマッチング
- 各色階の効果と対応するカラー値をリアルタイムプレビュー
- 直接使用可能な TailwindCSS 設定コードを自動生成
使用方法
- カラー入力ボックスに16進数カラー値を入力または選択(例: #cb0101)
- システムが自動的にそのカラーの完全なパレットを生成
- 左側の色階プレビューで各レベルの視覚効果を確認
- 右側に生成された TailwindCSS 設定コードが表示されます
- コードパネルのコピーボタンをクリックして設定をクリップボードにコピー
- コードをプロジェクトの
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)
- 生成される色階は自動的に明暗の変化に適応し、使いやすさを確保します
- ツールは最も近い標準カラー名をインテリジェントにマッチングし、識別を容易にします



