HEXからHSL変換ツール HEXカラーコードをHSL（色相、彩度、明度）値に変換します。
HEXからHSL変換ツール
HEXカラーコードをHSL（色相、彩度、明度）値に変換します。
HEX
HEX16
HSL
Hue (0-360°)Saturation (0-100%)Lightness (0-100%)
HSL CSS
hsl() CSS
What Is HEXからHSL変換ツール?
HEX to HSLコンバーターは、16進数の色コードをHSL（色相、彩度、明度）色モデルに変換します。RGBが赤、緑、青の光を混ぜて色を表すのに対し、HSLは人間にとってより直感的な方法で色を記述します。色相は色そのもの（色輪上の度数で測定：0°は赤、120°は緑、240°は青）です。彩度は色の強さや純度（0%はグレイ、100%は完全に鮮やか）を表します。明度は色の明るさや暗さ（0%は黒、50%は純粋な色、100%は白）を表します。これにより、HSLはカラーパレットを作成したり、彩度を変えずに明度を調整したり、調和的な色スキームを生成するために不可欠です。デザイナーと開発者は、HEX（標準のWeb形式）からHSLへの変換が必要になることがよくあります。たとえば、ダークなシェードを作成することはHSLでは簡単ですが、HEXやRGBでは3つのチャンネルすべてを比例して調整する必要があります。
Why Use HEXからHSL変換ツール?
-
HEX HSL
-
HEX16
-
CSS hsl()
-
3 6HEX
-
HSL
Common Use Cases
Color Palette Design
HEX HSL
Theme Generation
Lightness
CSS Custom Properties
--primary-h --primary-s --primary-l CSS
Accessibility Adjustments
Lightness
Technical Guide
HEXからHSLへの変換は、まず16進数文字列をRGB値（0〜255）にデコードし、それをHSLに変換します。アルゴリズムは、RGBを0〜1の範囲に正規化し、最大チャンネル値と最小チャンネル値を見つけ、次のように計算します：明度 = (max + min) / 2。如果 max と min が等しい場合、色は無彩色（グレイ）で、色相 = 0、彩度 = 0 となります。そうでない場合は、彩度 = delta / (1 - |2L - 1|) であり、delta = max - min です。色相は、どのチャンネルが最大であるかによって異なります。如果赤が最大の場合、H = (G-B)/delta；如果緑が最大の場合、H = (B-R)/delta + 2；如果青が最大の場合、H = (R-G)/delta + 4。結果は60を掛けて度数（0〜360）に変換されます。HSLはRGBキューブの円筒形表現であり、色操作に対してより直感的です。一つの重要な違い：HSLの明度50%はどの色相でも最も鲜やかな形式を表し、0%は常に黒で100%は常に白であるのに対し、HSV/HSBでは100%の値（輝度）が最も鮮やかな色を表します。
Tips & Best Practices
Related Tools
HEXからRGBコンバーター
HEXカラーコードを瞬時にRGB値に変換。プレビューパネルでライブ表示。
🎨 Color Tools
HSLからHEXへのコンバータ
インタラクティブなスライダーを使ってHSLカラー値をHEXコードに変換します。
🎨 Color Tools
RGBからHSLコンバーター
インタラクティブなスライダーでRGB値をHSL色形式に変換します。
🎨 Color Tools
カラーピッカー
HEX、RGB、HSL、CMYK形式の出力に対応したインタラクティブなカラーピッカー。
🎨 Color Tools
色のシャデーゲネレーター
任意の色を指定したステップ数で暗くすることができます。
🎨 Color ToolsFrequently Asked Questions
About This Tool
HEXからHSL変換ツール is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.