HEXをHSLに変換する方法
HEXのカラーコードをHSLにすぐ変換できます。HEXかRGBの値を入力するかスライダーを動かすと、すべての形式が同時に更新され、プレビュー、計算式、よく使う色の表も確認できます。
- 上の対応する欄にHEXの値（例：#3B82F6）を入力するか貼り付けます。
- HSLの値がすぐに更新されます：#3B82F6 は hsl(217, 91%, 60%) です。ほかの形式と色のプレビューも一緒に変わります。
- HSLの値をコピーして、CSS、デザインツール、コードに貼り付けます。
HEX→HSL の計算式
赤・緑・青を0〜1に換算します。明度は最大と最小のチャンネルの平均、彩度はその差が大きいほど高くなり、色相は最も強いチャンネルの360°色相環上の位置で決まります：
#3B82F6 → hsl(217, 91%, 60%)
よく使う色のHEXとHSL
| HEX | HSL |
|---|---|
#000000 | hsl(0, 0%, 0%) |
#FFFFFF | hsl(0, 0%, 100%) |
#FF0000 | hsl(0, 100%, 50%) |
#00FF00 | hsl(120, 100%, 50%) |
#0000FF | hsl(240, 100%, 50%) |
#FFFF00 | hsl(60, 100%, 50%) |
#00FFFF | hsl(180, 100%, 50%) |
#FF00FF | hsl(300, 100%, 50%) |
#808080 | hsl(0, 0%, 50%) |
#FFA500 | hsl(39, 100%, 50%) |
#800080 | hsl(300, 100%, 25%) |
#3B82F6 | hsl(217, 91%, 60%) |
HEXとHSLとは
HEXカラーは#のあとに16進数6桁が続く形で、赤・緑・青を2桁ずつ、00（なし）からFF（最大）で表します。CSSやデザインツールで最もよく使われる書き方です。
HSLは色相（色相環上の0〜360の角度）、彩度、明度（どちらも%）で色を表します。同じ色の明るい・暗い・くすんだバリエーションを作りやすいのが特長です。
よくある質問
変換すると色は変わりますか？
HEX、RGB、HSLは同じ画面上の色を表すので、相互の変換は正確です（HSLは整数に丸めます）。CMYKは印刷用で、仕上がりはプリンターのカラープロファイルによって変わるため、画面の色から求めたCMYKは目安として使ってください。
結果をCSSで使えますか？
はい。CSSはhex（#3B82F6）、rgb(59, 130, 246)、hsl(217, 91%, 60%) をそのまま使えます。CMYKはCSSの形式ではなく、印刷やデザインソフトで使います。
透明度はどうなりますか？
アルファ値を追加します。CSSでは8桁のhex（#3B82F680）かrgba()/hsla()を使います。変換ツールは不透明な色で計算し、アルファ値はどの形式でも同じです。
このツールは無料ですか？
はい、無料でご利用いただけます。登録・メールアドレス不要。結果はこのページに表示されます。
結果はどこで確認できますか？
このページでツールを使用すると、結果がここに表示されます。メールで受け取る必要はありません。