色のトーン調整機能
無料でオンラインで利用可能 色のトーン調整機能 インストール不要のツール
カラーティントとシェードについて
このツールは、ベースカラーの HSL の明度をそれぞれ 100% および 0% に向けて段階的に調整することで、ティント（より明るいバリアント）とシェード（より暗いバリアント）を生成します。ステップ数（5-20）を選択し、任意のスウォッチをクリックするとその 16 進数値をコピーできます。ティントは色相と彩度を保ったまま明度を上げ、シェードは明度を下げます。
使い方
1. カラーピッカーまたは 16 進数入力でベースカラーを選びます。 2. ステップスライダーを 5 から 20 の間に設定します。 3. ティントカードにはより明るいバリアント（それぞれに 16 進数値とステップパーセントのラベル付き）が表示され、シェードカードにはより暗いバリアントが表示されます。 4. 任意のスウォッチをクリックすると 16 進数値がコピーされます。チェックアイコンでコピーが確認されます。
生成アルゴリズム
ベースカラーは HSL に変換されます。N 個のうちのステップ `i` について、ティントは `L = baseL + (100 - baseL) * (i / N)` を設定し、シェードは `L = baseL - baseL * (i / N)` を設定します。色相と彩度は一定に保たれます。パーセントラベルは `round((i / N) * 100)` で、明度値ではなくランプ内の進行位置を表します。生成された HSL は RGB に戻され、表示用に 16 進数に変換されます。
▶各スウォッチのパーセンテージは何を意味しますか？
ステップインデックスを総ステップ数で割って 100 を掛けたものです。ランプ内の位置（例：10 個中 5 番目 = 50%）を示し、そのスウォッチの HSL 明度値ではありません。
▶なぜ色相と彩度は変更されないのですか？
アルゴリズムは明度のみを変更し、色ファミリーの知覚的一貫性を保ちます。色相や彩度を調整すると、単に明るくしたり暗くしたりするのではなく、色自体がシフトしてしまいます。
▶複数の色を一度にコピーできますか？
いいえ。各クリックで単一のスウォッチの 16 進数値がコピーされ、1.5 秒間チェックアイコンが表示されます。複数の値を集めるには繰り返しクリックしてください。
▶無効な 16 進数値を入力した場合はどうなりますか？
16 進数値が RGB に解析できない場合、HSL は計算されず、有効な 6 桁の 16 進数値が入力されるまでティントとシェードのカードはレンダリングされません。
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。