カラーシェード生成器

使い方

1. カラーピッカーを使うか、HEX値（例：#3b82f6）を直接入力してベースカラーを設定します。
2. パレットが即座に更新され、最も明るい（50）から最も暗い（900）まで10シェードが表示されます。
3. 各シェードカードに HEX・HSL・RGB 値が表示されます。
4. シェードカードをクリックすると、そのHEX値をクリップボードにコピーします。
5. CSS変数としてすべてコピーをクリックすると、全シェードを :root CSSブロックとしてコピーします。

コピー全体の出力形式

:root {
  --color-50: #EFF6FF;
  --color-100: #DBEAFE;
  --color-200: #BFDBFE;
  --color-300: #93C5FD;
  --color-400: #60A5FA;
  --color-500: #3B82F6;
  --color-600: #2563EB;
  --color-700: #1D4ED8;
  --color-800: #1E40AF;
  --color-900: #1E3A8A;
}

デザインシステムでのシェード活用

10段階シェードスケールは以下に最適です：

• プライマリ/アクセントカラー：500をメインブランドカラーとして使用し、明るいシェードを背景・ホバー状態に、暗いシェードをテキスト・ボーダーに使用
• ステートフィードバック：50–100を警告背景のティントに、700–900をその上のテキスト色に
• ダークモード：スケールを反転させ、900を背景に、50をテキストに
• コンポーネントバリアント：ボタンのデフォルト・ホバー・アクティブ状態をそれぞれ500・600・700に

関連ツール

• カラーコンバーター — HEX・HSL・RGB・HSV間の変換
• CSS変数ジェネレーター — 完全なデザイントークンシステムを構築