HEX → HSL カラー変換ツール
このツールとは HEX → HSL カラー変換ツール
このツールはHEXカラーコード（例：#3B82F6）をHSL値（例：hsl(217, 91%, 60%)）に変換します。HSLとは色相（Hue）・彩度（Saturation）・明度（Lightness）の略で、人間の感覚に近い直感的な色モデルです。HEXやRGBと比べて明度の調整が簡単なため、カラーパレット設計やCSSカスタムプロパティに特に適しています。
使い方
- HEXフィールドにカラーコードを入力または貼り付けます（#あり・なしどちらでも可）。
- HSL値とRGB値が下のフィールドに瞬時に表示されます。
- HSL横のコピーボタンでhsl(h, s%, l%)形式をコピーできます。
- 上部のリンクから6種類のカラー変換モードに切り替えられます。
こんなときに便利
ブランドカラーからカラーシステムを組み立てたいときは、ブランドのHEX値（#E63946）を貼り付けると hsl(356, 75%, 56%) が得られます。あとは明度を上げれば明るいティント、下げれば暗いシェードを作れて、色相を保ったまま体系的なパレットを展開できます。
よくある質問
HSLはなぜHEXより扱いやすいのですか？
HSLは人間の感覚に近い形式です。色相（0〜360°）で色の種類、彩度（0〜100%）で鮮やかさ、明度（0〜100%）で明暗を直感的に調整できます。HEXの16進数を操作するよりも色のバリエーション作成が容易です。
#FF0000はHSLでどう表されますか？
純粋な赤#FF0000はhsl(0, 100%, 50%)です。色相0°が赤、100%の彩度と50%の明度で純粋な赤を表します。
CSSでHSLカラーは使えますか？
はい。モダンCSSはhsl()とhsla()記法を完全にサポートしています。例：color: hsl(217, 91%, 60%); や background: hsla(217, 91%, 60%, 0.5); のように記述できます。