Developer Design Utility
Color Palette生成ツール
1つの基準色からTailwindスタイルの50〜900カラーパレットを生成し、CSS変数・SCSS変数・JSON形式でデザインシステムに活用できます。
パレット自動生成
ブランドカラーを基準に明度別のカラーパレットを生成します。
HEX / RGBプレビュー
各カラーをカード形式で確認し、クリックしてコピーできます。
CSS・SCSS・JSON出力
プロジェクトにそのまま貼り付けられるコードを生成します。
パレット名
primary
基準色
#2563eb
生成段階
10段階
出力形式
CSS
Palette設定
ブランドカラー、パレット名、生成方式、出力形式を選択してください。
CSS変数名、SCSS変数名、JSONキー名に使用されます。
ブランドカラーやボタンのメインカラーを入力してください。
デザインシステムにはTailwind Style、簡易UIにはCompactがおすすめです。
プロジェクトのスタイル管理方法に合わせて選択してください。
カラーパレットプレビュー
カラーカードをクリックするとHEXコードをコピーできます。
基準色を入力して「パレット生成」ボタンを押してください。
生成結果
以下のコードをCSS、SCSS、テーマ設定ファイルで利用できます。
パレットを生成するとここにコードが表示されます。
ヘルプ
Color Palette生成ツールはいつ使いますか？
ボタン、背景、境界線、ホバー状態、ダークモードなど、UI全体の色を統一したい場合に使用します。
50〜900の段階とは？
数字が小さいほど明るい色、大きいほど暗い色です。通常は500または600をブランドカラーとして使用します。
- 50〜100: 明るい背景色
- 200〜300: 薄い境界線やホバー背景
- 400〜600: ボタン、リンク、アクセントカラー
- 700〜900: 強調テキストや暗い背景
おすすめの使い方
- ブランドカラーは500または600を基準にするのがおすすめです。
- ボタン背景は500〜600、ホバーは600〜700を使用すると自然です。
- カード背景や通知背景には50〜100が適しています。
- 境界線には200〜300を使うと自然な区切りになります。
CSS変数で管理するメリット
CSS変数を使うと複数ページで同じカラーパターンを再利用しやすくなり、ブランドカラー変更時も簡単に反映できます。
基準色はどの色を選べばいいですか？
サイトで最もよく使うボタンカラーやブランドカラーを選ぶのがおすすめです。極端に明るい色や暗い色より、中間的な明るさの色が適しています。
CSS VariablesとSCSS Variablesはどちらを選ぶべきですか？
通常のCSSプロジェクトならCSS Variables、SCSSを利用している場合はSCSS Variablesがおすすめです。
JSON出力はどこで使いますか？
デザイントークン、テーマ設定、フロントエンド設定オブジェクトなどで利用できます。