このツールはCSSのHEX表記をすべて受け付けます。6桁の#3366cc、3桁の省略形#36c、アルファチャンネル付きの4桁・8桁の形式にも対応し、#の有無は問いません。hsl()またはhsla()の文字列に加え、各値の内訳、さらに逆方向のHSLからHEXへの変換欄も用意しています。すべての処理はブラウザ内で完結し、アップロードもアカウント登録も不要で、回数の制限もありません。
HEX to HSL 変換ツール
すべてブラウザー内で動作します。アップロードも登録も不要です。
CSS
hsl(220, 60%, 50%)変換の内訳
色相220
彩度60%
明度50%
逆に変換したいですか。HSLからHEXへ
#3366ccHEXをHSLに変換するには
まずhexコードを赤・緑・青（0から255）に分解し、それを色相・彩度・明度で表し直します。色相はカラーホイール上の角度（0から360）、彩度は色の鮮やかさ（0から100%）、明度は明るさ（0から100%）です。#3366ccはhsl(220, 60%, 50%)になります。このツールは入力しながら瞬時に変換します。
使い方
- 1hexコードを入力する. #3366cc（または#36c）のようなhexカラーコードを入力・貼り付けするか、カラースウォッチで選択します。#は省略できます。
- 2HSLの値を確認する. 入力に合わせてhsl()の文字列と各値、リアルタイムのカラープレビューが更新され、色相・彩度・明度の内訳も表示されます。
- 3必要な形式をコピーする. hsl()の文字列や各数値の横にある「コピー」を押します。逆にHSLからHEXへ変換したい場合は、下の欄に色相・彩度・明度を入力するとhexコードが得られます。
こんな方に
- フロントエンド開発者が、hoverやfocusの状態を作るときに、新しい色を一から選ばずにhexをhsl()に変換して明度だけ調整する場面。
- パレットを組み立てるデザイナーが、色相は固定したまま彩度と明度だけを段階的に変えて、1つのブランドカラーから濃淡のバリエーションを作る場面。
- テーマやデザイントークンの作成者が、hex文字列より手で読み書きしやすいという理由でHSL形式のまま色を管理する場面。
- 複数のツール間で色を合わせたい人が、hex（Figmaやほとんどのプロパティ）とHSL（SCSSのヘルパーや一部のカラーシステム）を行き来する場面。
よくある質問
このHEX HSL変換ツールは無料ですか
はい、完全無料で、登録も回数制限もありません。処理はすべてブラウザ内で行われます。
入力した色はどこかにアップロードされますか
いいえ。変換はお使いの端末上でJavaScriptが行うだけで、サーバーには何も送信されません。ページを一度読み込めば、オフラインでも動作し続けます。
HSLとは何ですか
HSLは色相（Hue）・彩度（Saturation）・明度（Lightness）の頭文字です。色相はカラーホイール上の0から360度の角度、彩度は0から100パーセントで色の鮮やかさ、明度は0パーセント（黒）から50パーセントの純色を経て100パーセント（白）までを表します。
HEXからHSLへ手計算で変換する方法は
hexを赤・緑・青に分解し、それぞれを255で割ります。3つの値の最大値と最小値を求め、明度はその平均、彩度は(最大値-最小値)を(1-|2L-1|)で割った値、色相はどのチャンネルが最大かによって決まり、0から360度の範囲に換算します。
#36cのような3桁の省略形にも対応していますか
はい。CSSの省略形では各桁が2回繰り返されるため、#36cは#3366ccに展開され、hsl(220, 60%, 50%)に変換されます。4桁の形式も同様で、最後の桁がアルファ値になります。
透明度（HSLA）はどう扱われますか
8桁のhexコードでは最後の2桁がアルファ値です。この値（0から255）を255で割ると、hsla()が求める0から1のアルファ値になり、小数点第3位で丸められます。例えば#3366cc80はhsla(220, 60%, 50%, 0.502)になります。
HSLからHEXへ逆変換できますか
はい。結果欄の下にあるHSLからHEXへの変換欄を使い、色相（0から360）と彩度・明度（0から100%）を入力すると、その場でhexコードが返されます。範囲外の値は自動的に丸められます。
hexよりHSLが便利なのはなぜですか
HSLは人が理解しやすい形式です。Lを上げれば明るく、Sを下げれば落ち着いた色に、Hを変えれば色そのものを変えられ、hexの数字を手探りで調整する必要がありません。そのため一貫性のあるパレットやhoverの状態、デザイントークンを作るのに向いています。