カラーシェード・ティント・トーンの使い分け — デザインシステムのカラーパレット設計
デザインシステムでは1つのブランドカラーから複数の明暗バリエーションを用意し、ホバー・無効・背景などの状態に対応します。Tint（白を混ぜた明るい色）・Shade（黒を混ぜた暗い色）・Tone（グレーを混ぜた彩度を下げた色）の3種類があります。
Tint・Shade・Toneとは
Tintは色に白を混ぜて明るくした色です。背景色・セカンダリボタン・ホバー状態に使われます。Shadeは色に黒を混ぜて暗くした色です。テキスト・ボーダー・フォーカス状態に活用されます。Toneはグレーを混ぜて彩度を下げた色で、落ち着いた印象が必要な場面に向いています。
Tailwindのカラースケール設計
Tailwind CSSのカラーシステムは50〜950の10段階スケールで設計されています（例: blue-50が最も薄く、blue-950が最も暗い）。Color Shade GeneratorはTailwind形式での出力に対応しており、ブランドカラーからTailwind互換のカラーパレットを生成してtailwind.config.jsに貼り付けられます。
カラーパレットのステップ数の選び方
5ステップは小規模プロジェクトや試作品向けで手軽です。7ステップはbalancedな中間的な選択です。10ステップはTailwindのような包括的なデザインシステム向けです。ステップを増やすほど細かい状態（ホバー・フォーカス・アクティブ・無効）に対応しやすくなりますが、管理するクラスも増えます。
CSS変数での利用
Color Shade GeneratorはCSS変数・SCSS変数形式での出力に対応しています。--color-primary-100から--color-primary-900のようにスケールをCSS変数として定義することで、ダークモード切り替えや将来のカラーシステム変更にも柔軟に対応できます。root要素とprefers-color-schemeメディアクエリを組み合わせることでダークモードの自動切り替えが実現できます。