明度・彩度パレットがなぜ必要なのか
デザインにおいて1つのブランドカラーだけでは、背景・強調・非活性状態など多様なUI要素を表現するのは難しいです。このツールは基準色の色相(Hue)をそのまま維持しながら明度と彩度だけを段階的に調整し、色系統が一貫したパレットを自動的に作成します。
計算の仕組み
入力したHEXカラーをHSL(色相・彩度・明度)モデルに変換した後、明度の値だけを20%から80%まで5段階に変えて1つの列を作り、彩度の値だけを20%から100%まで5段階に変えてもう1つの列を作ります。色相(Hue)はどちらの列でも固定されているため、色系統の統一感が保たれます。
活用のヒント
明度段階はダークモード・ライトモードの背景、ホバー・非活性状態など明るさの違いで階層を表す際に便利で、彩度段階は同じ色相を保ちながら鮮やかさの度合いを調整する際に良いです。生成されたHEXコードをクリックするとすぐにコピーできます。
よくある質問
Q. 明度と彩度の違いは何ですか?
A. 明度は色の明るさ・暗さの度合い、彩度は色の鮮やかさ・くすみの度合いを表します。同じ色相(Hue)でも明度・彩度を調整すると全く異なる印象のパレットを作れます。
Q. 生成されたパレットはどこで使いますか?
A. 明度段階は1つの色で影・強調・背景などの階層構造を表す際に、彩度段階は同じ色相を保ちながらトーンを調整する際に便利です。
Q. 色相(Hue)自体を変えるにはどうすればいいですか?
A. このツールは選択した基準色の色相(Hue)を維持したまま明度・彩度だけを変化させます。別の色相にしたい場合は基準色を先に変更してください。