HEXからHSLへのカラー変換
CSSのHEXカラーコードをワンクリックでHSL(色相・彩度・明度)に変換します。
このツールは役に立ちましたか？
ありがとうございます。ツールの改善に役立てます。
このツールの使い方
- 6桁のHEXカラーコード(例:#ff5733)を入力してください。先頭の#は省略可能です。
- 色相を度数、彩度と明度をパーセンテージとしてHSLに変換します。
- hsl()文字列をCSSやスタイルシートにコピーしてください。
HEXカラーコードを貼り付けると、CSSのhsl()関数やデザインツールで使えるHSL値が得られます。
計算式
Expand a 3-digit hex to 6 digits if needed (e.g. #abc → #aabbcc), then parse each pair: r = parseInt(hex[0..1], 16) / 255, similarly for g and b.
Then apply RGB-to-HSL: L = (max + min) / 2; S = d / (2 − max − min) if L > 0.5, else S = d / (max + min); hue from the dominant channel as in RGB-to-HSL.
よくある質問
- なぜHEXをHSLに変換するのですか?
- HSLは明るさや彩度を調整する際に扱いやすい形式です。色相を固定したまま彩度・明度を調整することで、ティントやシェードを作成できます。
- 3桁のHEXにも対応していますか?
- はい — #abcは#aabbccとして扱われます。