ツールを実行
このツールは、入力された16進数カラーコードに基づいて、明るい側（ティント）と暗い側（シェード）の色のバリエーションを自動的に生成します。デザイナーや開発者がUIのホバー状態、グラデーション、または階層的な配色システムを構築する際に役立ちます。基本色として任意の16進数コードを入力でき、省略時は青色が適用されます。生成されるバリエーションの数はステップ数で調整可能で、各グループに含まれる色の数を制御できます。また、ティントのみ、シェードのみ、またはその両方を含むかどうかを個別に選択できます。出力結果には、計算された正確な16進数コードが含まれ、コピーしてCSSやデザインツールで即座に使用できます。色の形式が不正な場合はエラー表示が行われますが、ツール自体は正常に動作します。3桁の短縮表記もサポートしており、自動的に展開されて処理されます。
使い方
- 「Color」フィールドに16進数カラーコード（例: #3498db）を入力します。先頭の#を省略しても自動で補完されます。
- 「Steps」フィールドに、生成したい色の段階数（正の整数）を入力します。デフォルトは10です。
- 「Include Tints」および「Include Shades」のチェックボックスを使用して、明るい側と暗い側のどちらを含めるかを選択します。
- 「Run」ボタンをクリックして処理を実行します。
- 結果パネルに表示されたカラーパレットと16進数コードを確認し、必要に応じてコピーします。
使用例
- 基本色 #3498db、ステップ数5、両方のグループを含めて実行すると、青系の明るい色5つと暗い色5つが生成されます。
- 基本色 #ff0000、ステップ数3、シェードのみを含めて実行すると、赤系の暗い色3つが生成され、ティントは除外されます。
よくある質問
3桁の16進数コードを使用できますか？
はい、可能です。3桁のコード（例: #f00）は、各桁を繰り返すことで6桁（#ff0000）に自動展開されて処理されます。
色の先頭に#記号がない場合はどうなりますか？
ツールが入力値を解析する前に、自動的に先頭に#記号を追加して処理を行います。
無効なカラーコードを入力するとどうなりますか？
解析できない形式の場合、結果パネルにエラーメッセージが表示されます。ツールは処理を完了し、エラー内容を確認できます。
生成される色の数はどのように決まりますか？
「Steps」で指定した数が、選択された各グループ（ティントまたはシェード）に含まれる色の数になります。