HSL カラーピッカー

使い方

1. スライダーをドラッグ。大きなプレビューパネルが現在の色を反映；アルファが 100% 未満ならチェッカーボードが透けて見える。
2. Random ボタン — 完全なネオンではない適度な彩度・明度を選択。
3. 必要な出力形式を CSS・Tailwind ユーティリティクラスにコピー。

よくある質問

RGB ではなく HSL を使う理由は？

HSL はデザイナーの思考に沿う：色相（どの色）・彩度（どれだけ鮮やか）・明度（どれだけ明るい）。一つの軸だけ調整（「同じ色で少し暗く」）するときスライダーを 1 つ動かすだけ。RGB で同じ変更は 3 チャネル全部触る必要がある。

8 桁 HEX とは？

アルファが 100% 未満になると HEX 出力が `#RRGGBBAA` に拡張。末尾 2 桁がアルファチャネルをエンコード（00 = 透明・FF = 不透明）。モダンブラウザとデザインツールはすべて対応。

なぜ最大彩度が明度 100 ではなく 50？

HSL では明度 0% は純粋な黒・100% は純粋な白 — どちらも彩度を殺す。どの色相も最も鮮やかに見えるのは明度 50% のとき。

関連ツール