カラーパレット生成器

このツールについて

カラーパレットエクストラクターは、Tailwind CSS・Material Designなどで使用される50〜900のシェード規則に合致する10段階のデザインシステムスケールを生成します。

生成されたスケールの各スウォッチはhex、RGB、HSL値を表示します。各スウォッチのテキスト色は輝度に基づいて自動的に白または暗色に調整されます。

使い方

1. カラーピッカーでベースカラーを選ぶか、hex値を入力します。
2. 10段階スケール（50〜900）が即座に生成され、全輝度範囲をカバーします。
3. hex・RGB・HSL値をデザインシステムやCSS変数に適用します。

活用事例

デザインシステムチームはTailwind設定の拡張やCSS変数として使う完全なカラースケールを生成します。フロントエンド開発者はシェード50を明るい背景、900を暗いテキストとするアクセシブルなUIを構築します。

よくある質問

• このスケールは他ツールの「シェード」と何が違う？ — このツールは一般的なデザインシステムの慣習に合わせた固定の10段階スケール（50, 100, 200, … 900）を生成します。
• 彩度の変化はスケールに影響しますか？ — ベースカラーの彩度はすべてのステップで保持され、明度のみ変化します。
• Tailwind CSSで直接使えますか？ — はい。各シェードのhex値をコピーしてtailwind.config.jsのtheme.extend.colorsにシェード番号をキーとして追加してください。