CodeKitHubこのツールとは？
シェードランプとは、1つの色の明度違いのバリエーションを並べたもので、ホバー状態、無効状態、ボーダー、ブランドカラーに関連しつつも同一ではない背景色など、UIデザイン全体で使われます。
このツールはベースカラーをHSLに変換し、色相と彩度を固定したまま、明度を約95%（ほぼ白のティント）から約10%（ほぼ黒のシェード）まで段階的に変化させます。元の色はランプの中央付近の自然な位置に配置されます。
なぜこれを使うのか？
- 固定のプリセットパレードだけでなく、任意の1色からデザインシステム風のランプ（Tailwindの50/100/200…/900スケールのような）を生成できます。
- 必要な粒度に応じて7段階、9段階、11段階を選べます。
- 各ステップに正確なHEXコードと明度パーセンテージが表示され、クリックでコピーできます。
- ランプ全体で色相と彩度が一定に保たれるため、すべてのシェードがベースカラーとはっきり関連づいて見え、グレーに寄っていきません。
- 無料・即時・完全ローカル動作。
使い方
- カラーピッカーを使うかHEXコードを入力して、ベースカラーを選びます。
- ランプの段階数（7、9、11）を選びます。
- 各シェードのHEXコードと明度パーセンテージをスウォッチ上で直接確認します。
- 任意のスウォッチをクリックしてHEXコードをコピーします。
例
入力
#3B82F6（中間の青）、9段階出力
ほぼ白のティント（明度約95%）からほぼ黒のシェード（明度約10%）までの9段階。#3B82F6自体は中央のステップとして配置される9段階すべてで色相と彩度は固定されたまま——明度のみが変化するため、各シェードは同じ色系統の一部だとはっきり分かります。
よくある質問
これはTailwind CSSがカラースケールに使っているのと同じ仕組みですか？
基本的な考え方（色相・彩度を固定し明度だけを変える）は同じですが、Tailwindの具体的なパレットを正確に再現したものではありません——Tailwindの50-900スケールはデザイナーが手作業で調整したもので、単一の計算式から生成されたものではありません。このツールは選んだ任意の色から比較可能な構造のランプを生成でき、ベースカラーがTailwindのプリセットにない場合に役立ちます。
隣り合う2段階の色がほぼ同じに見えるのはなぜですか？
これはランプの非常に明るい端や非常に暗い端付近で起こりやすく、知覚される明度の変化が数値上のパーセンテージが示すよりもゆっくりであるためです（これは人間の色知覚の既知の性質であり、このツール特有のものではありません）。段階数を減らす（11ではなく7にする）と明度の値がより広く分散し、ほぼ同じに見えるスウォッチが減ります。
これらのシェードをそのままCSSカスタムプロパティとして使えますか？
はい——各HEXコードをコピーして、CSS変数（例：--color-brand-100から--color-brand-900）に貼り付け、ランプの位置をプロジェクトで使っている命名スケールに合わせてください。
このツールとカラーミキサー、どちらを使うべきですか？
ホバー状態、控えめな背景色、ブランドカラーに関連するボーダーなど、1つの色の明るいバージョンや暗いバージョンを作る場合はこのシェード生成ツールを使ってください。代わりに2つの異なる色の間の色（例えばプライマリの青とセカンダリのオレンジの間のステップ）が必要な場合は、1色の明度を変えるのではなく任意の比率で2色のRGBチャンネルを補間するカラーミキサーを使ってください。
ベースカラーがすでに非常に明るい、または非常に暗い場合はどうなりますか？
ベースカラーは常に中央の行に位置し、ティントはその上で明度約95%まで、シェードはその下で明度約10%まで段階的に変化します。ベースがすでにほぼ白に近い場合、ランプのティント側は狭い明度範囲に圧縮され（ほぼ同じに見える行になる）、シェード側は広く分散します——非常に暗いベースの場合はその逆になります。最も均等に分散したランプを得るには、明度が中程度（おおよそ40-60%）のバージョンの色から始めてください。
トーン（色をグレーと混ぜたもの）も生成できますか？
いいえ——このツールは彩度を固定したまま明度のみを変化させるため、ティントとシェードは生成できますがトーンは生成できません。より落ち着いたランプが欲しい場合は、まずベースカラーの彩度を下げ（カラーピッカーでよりグレーに近いバージョンを選ぶ）、それを基にランプを生成してください。すべてのステップが低い彩度を引き継ぎます。