HSL カラーピッカー
多くの CSS デザイナーが考える方法 — HSL モデルのスライダーピッカー。各レールがスライダーが変化させる軸を可視化 — 現在の色相で彩度 0 はどう見えるか、明度が黒・現在の色・白へどう変わるかが一目瞭然。出力は HEX（オプションで 8 桁アルファ）・`rgb()` / `rgba()`・`hsl()` / `hsla()`・Tailwind 任意値ラッパー。
—
プレビュー
色相200°
彩度75%
明度50%
アルファ100%
出力
- HEX#209FDF
- RGBrgb(32, 159, 223)
- HSLhsl(200, 75%, 50%)
- Tailwind[color:#209fdf]
使い方
- スライダーをドラッグ。大きなプレビューパネルが現在の色を反映；アルファが 100% 未満ならチェッカーボードが透けて見える。
- Random ボタン — 完全なネオンではない適度な彩度・明度を選択。
- 必要な出力形式を CSS・Tailwind ユーティリティクラスにコピー。
よくある質問
- RGB ではなく HSL を使う理由は？
- HSL はデザイナーの思考に沿う：色相（どの色）・彩度（どれだけ鮮やか）・明度（どれだけ明るい）。一つの軸だけ調整（「同じ色で少し暗く」）するときスライダーを 1 つ動かすだけ。RGB で同じ変更は 3 チャネル全部触る必要がある。
- 8 桁 HEX とは？
- アルファが 100% 未満になると HEX 出力が `#RRGGBBAA` に拡張。末尾 2 桁がアルファチャネルをエンコード（00 = 透明・FF = 不透明）。モダンブラウザとデザインツールはすべて対応。
- なぜ最大彩度が明度 100 ではなく 50？
- HSL では明度 0% は純粋な黒・100% は純粋な白 — どちらも彩度を殺す。どの色相も最も鮮やかに見えるのは明度 50% のとき。
関連ツール
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー 0 0
ランダムカラー生成
ランダムな色を HEX・RGB・HSL でまとめて生成 — 個数を選び、ワンクリックでコピー、すぐに再生成してデザインの着想に。
ランダム 0 0
波長→色 変換器（nm → sRGB）
光の波長（380〜780 nm、可視光）を sRGB 近似色に変換 — クリック可能な虹グラデーションバーと、実際の太陽分光から得たフラウンホーファー吸収線リファレンス付き。
カラー 0 0
CMYK ↔ RGB カラー変換ツール（印刷用色空間）
画面用RGB/hexと印刷用CMYKパーセントを相互変換します。Simple、GCR（グレーコンポーネント置換）、UCR（アンダーカラー除去）のブラック生成方式、チャンネル分版プレビュー、総インク被覆率表示に対応。
カラー 0 0
Tailwind カラーパレット
Tailwind CSS のデフォルトパレット全体 — 22 色相 × 11 シェード（50〜950）— クリックで Tailwind クラス、HEX、rgb() としてコピー。
カラー 0 0
色の明るさ比較 (HSL vs Lab L* vs WCAG vs HSP)
HSL 明度・HSV 値・WCAG 相対輝度(LRV)・CIE Lab L*(知覚明度)・Rec. 709 ルーマ・HSP 知覚明度・素朴な (R+G+B)/3 など 7 種の明るさ指標を、1 色または 2 色について同時に比較。「より明るく見えるはず」の色がなぜ暗く感じられるか即座に把握できます。
カラー 0 0