Tailwindカラーパレット生成 カラー・配色
ブランドカラーを1色入力するだけで、Tailwind v4標準の50〜950の11段階パレットを自動生成。@theme設定・CSS変数・JSON出力に対応し、shadcn/uiやデザインシステム構築の時間を大幅短縮します。
🌈 生成されたパレット
クリックでHEXコピー✨ 配色プレビュー
このツールについて
Tailwind CSSの50〜950まで11段階の標準色スケールに準拠した、自然なグラデーションパレットを自動生成します。HSL色空間で明度を体系的に調整するため、見た目に違和感のない配色が一瞬で完成します。
生成アルゴリズム
- HSL変換: 入力HEX → HSL に変換し、彩度・色相を保持
- 明度カーブ: Tailwind標準の各階調の明度値 (97/94/86/77/66/56/46/38/30/22/14) に近似
- 彩度補正: 暗い側 (700-950) は彩度をやや下げ、明るい側 (50-200) は鮮やかさを保持
- 500を基準: ユーザー入力色を500階調として中央に配置
出力形式
- @theme (Tailwind v4): CSS-first設定方式。
app.css冒頭に貼付け - tailwind.config.js: 従来形式 (v3互換)。設定ファイルに貼付け
- CSS変数: 純粋なCSSカスタムプロパティ。Tailwind以外でも使用可
- JSON: API・スクリプトでの利用向け
活用シーン
- shadcn/uiの
--primaryなどCSS変数の設定 - Figma → Tailwind移行時のカラートークン化
- ブランドガイドライン構築 (色の階層管理)
- ダークモード対応 (50と950を反転する等)
注意事項
- 生成パレットはアルゴリズムによる近似値です。プロダクション利用前にWCAG AAコントラストチェック推奨
- 蛍光色・極端な原色は階調生成が難しい場合があります
- ベースカラー (500) はそのまま入力値が反映されます