明度・彩度調整ツール

明度・彩度調整ツールの使い方

明度・彩度調整ツールは、基準色の明るさ・鮮やかさを調整できる無料ツールです。会員登録は不要で、入力内容はブラウザの外に送信されません。

1. 基準色を入力またはカラーピッカーで選びます。
2. 明度・彩度のスライダーを動かして調整します（マイナスで暗く・くすませる、プラスで明るく・鮮やかにします）。
3. 調整前後の色見本とHEX・RGBが自動で表示されます。
4. コピーボタンで調整後のHEXコードをコピーします。

HSLでの調整の仕組みについて

このツールは入力した色をいったんHSL（色相・彩度・明度）に変換し、彩度・明度だけを調整してからHEX・RGBに戻します。色相（Hue）は変更しないため、「同じ系統の色のまま明るさや鮮やかさだけ変える」という直感的な操作ができます。

• 明度・彩度は0〜100%の範囲に収まるよう自動的に制限されます。基準色の明度が低い場合、大きくマイナスしても真っ黒（明度0%）で頭打ちになります。
• ボタンのホバー色は「明度を-10〜-15程度」、無効化（disabled）状態は「彩度を大きくマイナス」にするなど、UIパターンごとの目安として使えます。
• 彩度を-100にすると、色相に関わらず完全なグレースケール（白黒の濃淡）になります。

よくあるつまずきポイント

• 明度を大きく上げると彩度が保たれていても色が白っぽく見えることがあります。鮮やかさを保ちたい場合は明度の変化を控えめにするのがコツです。
• 基準色がすでに彩度0（グレー）の場合、彩度を上げても色相の情報が無いため色味は付きません。
• 複数の濃淡パターンをまとめて作りたい場合はカラーパレット生成ツールの「単色濃淡」もあわせてご利用ください。