Tint・Shade パレット生成ツールの使い方
ベースカラー（HEX）をカラーピッカーで選択するか直接入力すると、白を混ぜたTint 5段階と、黒を混ぜたShade 5段階の計10色パレットが自動生成されます。各スウォッチをクリックするとHEXコードがコピーされます。
T20は白を20%混ぜた色、T100は白100%（純白に近い色）、S40は黒を40%混ぜた色を意味します。Tintはホバー状態・背景・無効要素に、Shadeは押下状態・ボーダー・ダーク系テキストに活用できます。
Tailwind CSSのカスタムカラー（100〜900スケール）やMaterial Designのカラーシステム、FigmaのColor Stylesにそのまま応用できます。ブランドカラー1色から統一されたカラースケールを構築しましょう。
よくある質問
TintとShadeの違いは何ですか？
Tintはベースカラーに白を混ぜて明るくした色、Shadeは黒を混ぜて暗くした色です。T20は白20%混合、S40は黒40%混合を意味します。
生成したパレットはどこで使えますか？
Tailwind CSSのカスタムカラー定義、FigmaのColor Styles、CSSカスタムプロパティ（--color-100〜900）などに活用できます。
HEX以外（RGBやHSL）でも入力できますか？
現在はHEX（#RRGGBB）形式のみ対応しています。RGB・HSLはオンラインの変換ツールでHEXに変換してからご利用ください。