HEX から HSL への変換 — HEX カラーコードを HSL 値に変換
HEX カラーコードを HSL 値に変換します。リアルタイムのカラースウォッチプレビュー付きで、完全にブラウザ内で動作します。アップロードもアカウント登録も制限もありません。
HEX to HSL
Convert HEX color codes to HSL values online. Enter a hex code and get HSL instantly. Works entirely in your browser.
HEX は CSS を書くウェブ開発者の言語です。#3B82F6 は 6 文字で、3 組の 16 進数 digit にマッピングされ、それぞれの組は赤・緑・青のチャネルを 00 から FF でエンコードしています。HSL はデザイナーが色を選ぶときに使う言語です。hsl(217, 91%, 60%) は色相（217 度、青の範囲）、彩度（91%、非常に鮮やか）、明度（60%、中間グレーよりやや明るい）です。この 2 つの表記は、同じ色、つまり同じ sRGB 値を記述しています。ただ、HSL 形式の方がよく出てくるデザイン作業——1 つの色相からパレットを作ることや、tint や shade を選んだり、色相や彩度に手を加えずにある色の明るさを調整したり——においてより有用です。
HEX から HSL への変換で「あまり自明ではない」のは、その変換計算です。HEX の組 3B は 10 進数の 59、82 は 130、F6 は 246 です。255 で割れば、0〜1 スケールでの RGB トリプレット (0.231, 0.510, 0.965) が得られます。HSL 変換は次の一連のステップです。3 つのチャネルの最大値と最小値を求め、差分（max - min）を計算し、そこから色相・彩度・明度を導きます。色相の計算には 6 つの場合分けがあり、どのチャネルが最大値かによって式が適切なものを選びます。結果として、0〜360 の色相、0〜100 の彩度、0〜100 の明度が得られます。変換コード全体でおよそ 10 行です。本ツールはこれを瞬時に処理します。
最後に受け渡しについてまとめます。配色作りが目的なら、HSL 出力は体系的なパレット生成への入力になります。明度を上げれば tint、下げれば shade、色相を回せば類似色が得られます。デザインツールの出力と合わせるのが目的なら、HSL 文字列は Figma、Sketch、Adobe XD のカラーパネルで「HSL」としてエクスポートされるものです。CSS が目的なら、HSL 構文は開発者にとって最も読みやすい形式です。background: hsl(217, 91%, 60%) は background: #3B82F6 よりも一目で読み取れます。明度と彩度がすぐに見えるからです。
使い方
HEX コードを入力する
入力欄に 3 桁の HEX（#3B8）または 6 桁の HEX（#3B82F6）を入力します。# を省略した場合は自動的に # が補完され、解析の前に短縮形式の HEX は拡張されます。
HSL の内訳を確認する
出力には色相（0〜360 度）、彩度（0〜100%）、明度（0〜100%）が表示されます。右側のライブスウォッチは入力に応じてリアルタイムで更新されるため、リアルタイムで色を確認できます。
HSL 文字列をコピーする
値を CSS でそのまま使える `hsl(217, 91%, 60%)` または `hsla(217, 91%, 60%, 1)` 宣言としてコピーします。スタイルシートやデザインツール、CSS-in-JS のテンプレートリテラルにそのまま貼り付けられます。
よくある質問
HSL は何に使われますか？
HSL（色相、彩度、明度）は RGB よりも直感的なカラーモデルで、デザイン作業に適しています。色相（0〜360）を選ぶとベースカラーが得られ、彩度（0〜100%）で鮮やかさを、明度（0〜100%）で明るさを調整します。デザイナーは HSL を使ってチントやシェードを体系的に作成します。
変換はロスレスですか？
はい。HEX、RGB、HSL は同じ sRGB カラーを数学的に等価に表現したものです。丸めやクリッピング、情報損失は一切ありません。変換は単に一連の算術演算であり、異なる表記でまったく同じ色を生成します。
色相の数値は何を表しますか？
色相は色相環上の色の位置を度単位で表します。0 が赤、60 が黄、120 が緑、180 がシアン、240 が青、300 がマゼンタ、360 が再び赤です。範囲全体は 0〜360 で、0 と 360 は同じ色（赤）を表します。
印刷すると HEX の色が違って見えるのはなぜですか？
HEX と HSL の両方が指すのは、画面が表示する sRGB カラーです。印刷には CMYK が使われ、sRGB より色域が狭くなります。画面で鮮やかに見える彩度の高い青や緑は、印刷するとくすんで見えることがあります。HEX から HSL への変換は正確ですが、sRGB から CMYK への変換は近似です。
代わりに RGB 値を入力できますか？
HEX から HSL ツールは HEX 入力専用です。RGB 入力には Color Converter ツールをご利用ください。このツールは HEX、RGB、HSL、CMYK を単一のインターフェースで受け付け、4 つすべてを同時に表示します。内部の変換処理は同じものです。
制限事項
- sRGB のみ対応本ツールはウェブ標準の sRGB 色空間を前提としています。Display P3 や Rec.2020 の色（一部の Apple デザインツールでのみ使われる稀なケース）を参照する HEX コードは sRGB として扱われ、 gamut 外の値はクリッピングされます。
- アルファチャンネル非対応本ツールは 3 桁および 6 桁の HEX（アルファなし）を扱います。アルファ付きの HEX（8 桁、例：#3B82F680）の場合、HSL 出力ではアルファは無視されます。HEXA から HSLA への変換には Color Converter をご利用ください。
- 色相は整数のみ出力される色相は最も近い整数度に丸められます。彩度と明度は最も近い整数パーセントに丸められます。より高い精度が必要な場合は、浮動小数点での元の値が利用可能です。設定でオンにできます。
プラットフォーム別の注意点
- macOS
- Digital Color Meter（Applications > Utilities にあります）はカーソル下の色を読み取ります。ブラウザツールは、サンプリングした色を HSL に変換するのに適しています。macOS のカラーピッカーはメインペインに HSL を表示しないためです。
- Windows
- PowerToys の Color Picker は画面上の任意の色を読み取れます。ブラウザツールは、拾った色を HSL に変換するのに適しています。多くの Windows デザインツールのカラーピッカーには HSL が表示されません。
- Linux
- GIMP のカラーピッカーは HEX、RGB、HSV を表示します。ブラウザツールは HSL 出力を追加できる点が優れており、HSL は CSS がネイティブに使うモデルです。本ツールと GIMP を組み合わせれば、ピック&コンバートの完全なワークフローが実現します。
- Web
- 完全にクライアントサイドで動作します。ページの読み込み後はオフラインでも動作します。HSL 出力は有効な CSS カラー値であり、HSL 構文をサポートする任意のスタイルシート、CSS-in-JS テンプレート、デザインツールにそのまま貼り付けられます。