ティント・シェードジェネレーター

このツールについて

ティント＆シェードジェネレーターは、ベースカラーから明るいバリアントと暗いバリアントを作成します。ティントはベースカラーに白を混合し（明度追加）、シェードは黒を混合します（明度低下）。

最大5段階のティントと5段階のシェード、そして元のベースカラーを生成し、選択した色を中心とした11段階パレットを提供します。各スウォッチをクリックするとヘックスコードをコピーできます。

使い方

1. カラーピッカーを使用するか、ヘックスコードを入力してベースカラーを選択してください。
2. サンプルボタンでプリセットカラーを素早く試せます。
3. レベル数（3〜5）を調整してパレットの幅を制御してください。
4. スウォッチをクリックしてヘックスコードをコピー、またはすべてコピーをクリックしてください。

活用事例

デザインシステムには各ブランドカラーの体系的なカラースケールが必要です。UIデザイナーはホバー・アクティブ・無効状態を単一のアクションカラーから生成し、フロントエンド開発者は一貫したカラーバリアントを作成します。

よくある質問

• ティントとシェードの違いは何ですか？ — ティントは白と混合（明るく）、シェードは黒と混合（暗く）します。トーンはグレーと混合しますが、ここでは生成されません。
• レベルはどのように計算されますか？ — 各レベルはベースカラーを白または黒と10%、30%、50%、70%、90%の割合で混合し、一貫した視覚的ステップを提供します。
• CSS変数を取得できますか？ — 出力はヘックスコードです。--color-500、--color-400などとしてCSSに貼り付けることができます。