カラー変換
HSL から HEX への変換 - HSL・HSLA をカラーコードに
HSL・HSLA の色を HEX・RGB・OKLCH に変換。色相・彩度・明度をスライダーで調整し、CSS 用のカラーコードをすぐにコピーできます。
°
%
%
結果
hsl(217 91% 60%)使い方
HSL は色相（0〜360°）・彩度・明度で色を表すため、直感的に扱えます。スライダーを動かすか数値を入力すると、HEX、アルファ付きの 8 桁 HEX、RGB、OKLCH がすぐに更新されます。
- 1 色相・彩度・明度を設定します。
- 2 必要に応じてアルファを下げて透明にします。
- 3 HEX・HEX8・RGB・OKLCH の結果をコピーします。
よくある質問
HSL の各値の意味は？
色相は色相環上の角度、彩度はグレー（0%）から純色（100%）までの鮮やかさ、明度は黒（0%）から純色（50%）を経て白（100%）までを表します。
HSLA を HEX に変換するには？
アルファを 1 未満にすると、#3B82F680 のような 8 桁 HEX を出力します。末尾 2 桁がアルファです。
HSL から HEX で値が丸められるのはなぜ？
HEX は 0〜255 の整数の RGB 値しか持てないため、HSL は最も近い RGB の色に丸められます。
HSL は知覚的に均等ですか？
いいえ。明度 50% の黄色は明度 50% の青よりずっと明るく見えます。均等なスケールには OKLCH を使いましょう。このツールでも出力します。