色のシェード・ティント生成器

使い方

1. 基本色を選択 — カラーピッカー使用または HEX 値を貼り付け。
2. モード選択: 両方（ティント+シェード）·ティントのみ·シェードのみ·トーン（グレー含む）。
3. ステップ数·出力形式を調整、スウォッチクリックで値コピー。

よくある質問

ティント·シェード·トーンの違い？

ティントは白との混合（明るく）·シェードは黒との混合（暗く）·トーンはグレーとの混合（くすみ）。3 つとも色相は保ち、明度/彩度の変化が異なる。

HSL 明度調整と同じ？

いいえ — RGB で白方向に混合するのは HSL 明度を上げるのと知覚的に異なる。純粋な RGB 混合は明るくなるにつれ彩度も下がる（パステル寄り）— デザイナーがティントに通常望む結果。

Tailwind 50-900 スケールへのマッピング？

基本色からティント ~9 個·シェード ~9 個を生成。明るい側は 50-400、暗い側は 600-900 を近似。Tailwind の正確なランプは知覚的均一性のため手動調整なので出発点 — 目で調整。

なぜ最も明るいティントが純粋な白ではない？

各ステップは白までの一定比率。10 ステップなら 1 ステップ目は白まで ~9%。純粋な白を得るには無限ステップが必要 — 最後のステップは「最も明るい」背景には通常十分近い。

関連ツール