HSL から HEX への変換 — HSL カラー値を HEX コードに変換
HSL カラーを HEX コードに変換します。色相、彩度、明度を 6 桁の HEX 文字列に変換。完全にブラウザ内で動作し、アップロードは不要です。
HSL to HEX
Convert HSL color values to HEX color codes online. Enter HSL like 30,100,50 and get hex. Works entirely in your browser.
HSL は、人にとって最も直感的に考えられるカラーモデルです。3 つの独立した軸があり、それぞれに明確な意味があります。色相は色相環上の角度、彩度は灰色に対する色の量、明度は黒や白にどれだけ近いか。デザイナーはパレットを作るときに HSL をよく使います。1 つの軸だけを調整すれば予測可能な結果が得られるからです。彩度を下げれば脱色、明度を上げれば明るく、色相を回せば系統がずれます。HEX は、ほとんどすべてのデザインツールが実際に保存しているものです。Figma、Sketch、Photoshop のスウォッチパネル、CSS 変数、Tailwind 設定——いずれも HEX 6 桁で色を保存し、ときどき 2 桁のアルファサフィックスを付けます。
このミスマッチが、HSL から HEX への変換をフロントエンド作業でよくある小さな雑務にしている理由です。変換自体は何行かの算術です。変換がおもしろくなるのは、エッジのケースです。知覚的な明度と HEX が暗黙に前提とする sRGB エンコードとの間のガンマ補正、チャネルあたり 8 ビットへの丸め、そして入力 HSL 自体が何を表すのかという疑問（CSS 文字列、生の 3 つの数値、デザインツールのスウォッチ、スクリーンショットのスポイト）。本ツールはよくある 3 つの入力形式を処理し、正確な算術結果の隣に丸めた結果を表示するので、「欲しい値」と「得られた値」の差がプレビュースウォッチで見えるようになっています。
多くの用途では、HSL から HEX への変換が成功した後の次のステップは、結果をデザインシステムのトークンとして取り込むか、1 行の CSS カスタムプロパティを書くことです。逆方向（誰かに渡された HEX 値があり、それを HSL で微調整したい）が必要な場合は、本サイトの hex-to-hsl コンバーターが同じ 3 つのスライダーに HEX を読み戻してくれるので、ラウンドトリップは 2 クリックで済みます。名前付きカラー、アクセシビリティチェック（WCAG コントラスト）、アップロードした画像からのパレット抽出は、同じシリーズの別ツールです。
使い方
H、S、L の値を入力する
3 つの値を入力するか、3 つのスライダーをドラッグします。色相は 360 で折り返され、彩度と明度は 0〜100 のパーセンテージです。
HEX の結果をコピーする
6 桁の HEX コードが即座に表示されます。デザインツールが要求する場合にのみ # プレフィックスを追加してください。最近の CSS や Figma はどちらの形式も受け入れます。
RGB プレビューと比較する
RGB と HSL の値が並べて表示されるため、別のツールで入力した値との 1〜2 ユニットの差など、変換時の丸めを見つけることができます。
よくある質問
なぜ結果は最も近い整数に丸められるのですか？
HEX はチャネルあたり 8 ビットの形式なので、端数を含む HSL 値は 256 ステップのいずれかに量子化する必要があります。1% 未満の彩度や明度の差は、設計上、変換時に消えます。
アルファ透過は保持されますか？
いいえ。出力は常に 6 桁（RRGGBB）です。アルファ付きの 8 桁 HEX が必要な場合は、アルファチャンネルを別個に扱える専用の color-converter ツールをご利用ください。
HSL と HSV の違いは何ですか？
HSV（色相、彩度、値）は V=100 で輝度がピークになります。HSL（色相、彩度、明度）は L=50 でピークになります。色相と彩度の意味は共通ですが、3 つ目の軸の扱いが異なります。デザイナーは L 軸が目の知覚する明るさに直接対応するため、HSL を好む傾向があります。
CSS の hsl() 文字列を貼り付けできますか？
はい。入力欄は CSS の完全な形式 `hsl(210, 50%, 40%)`、カンマを省略した `hsl(210 50% 40%)`、および生の数値 `210 50 40` の 3 つすべてを受け付け、すべて同じ結果に解析されます。
制限事項
- sRGB のみ対応HEX は暗黙的に sRGB を意味します。Display P3 や Rec.2020 のワイド gamut 色は変換時にクリッピングされます。gamut を保つ必要がある場合はカラープロファイルに対応したツールをご利用ください。
- 名前付きカラーには対応していません出力は HEX コードであり、色の名前ではありません。「rebeccapurple」や他の 147 個の CSS 名前付きカラーは公開されていません。逆引きテーブルは別ツールです。
- リニアとガンマの混同HEX は sRGB エンコード（ガンマ補正済み）の値を前提としています。入力 HSL がリニア RGB から導出されたものである場合、表示時に期待よりやや暗く見えることがあります。
プラットフォーム別の注意点
- macOS
- Digital Color Meter（/Applications/Utilities にあります）は sRGB で値を報告し、対応する HEX を画面上に表示します。変換結果を目視で確認するのに便利です。
- Windows
- PowerToys の Color Picker（Win+Shift+C）は # プレフィックス付きで HEX として色を貼り付けます。デザインファイルに貼り付ける前に変換結果を確認するためにご利用ください。
- Linux
- GIMP のカラーピッカーはフォアグラウンド／バックグラウンドカラーボックスに HEX を表示します。スポイトは HSL も報告するので、GIMP を通じて色をラウンドトリップして検証できます。
- Web
- 主要なブラウザはすべて `<input type="color">` 要素にネイティブカラーピッカーを備えており、常に sRGB HEX を表示します。変換結果のサニティチェックにご利用ください。